計算屬性不觸發

Question

我有一個非常基本的例子。當我點擊單選按鈕，{{categoryFullName}}應該被更新：

<div id="create_category" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 

      <div class="modal-body"> 
       <div class="col-xs-12" id="modal"> 

        <div class="row"> 
         <div class="col-xs-12"> 
          <div class=" form-group border-grey-700"> 
           <p class="full-width border-lg p-20 text-bold text-size-large text-center text-uppercase"> 
            {{ categoryFullName }} </p> 
           <hr/> 
          </div> 
         </div> 
        </div> 


        <div class="row"> 

         <div class="col-md-4 col-md-offset-2"> 

          <div class=" form-group"> 

           <label for="isTeam" class="text-bold">Team</label> 
           <br/> 

           <div> 
            <input type="radio" name="isTeam" id='yes' value="1" v-model="isTeam"/> 
            <label for="yes"> Si</label> 

            &nbsp;&nbsp;&nbsp; 
            <input type="radio" name="isTeam" id='no' value="0" v-model="isTeam"/> 
            <label for="no">No</label> 
           </div> 
          </div> 

         </div> 

        </div> 

       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<script> 
    let team = 'team'; 
    let single = 'single'; 
</script> 

我的Vue腳本：

new Vue({ 
    el: '#create_category', 
    data: { 
     isTeam: 0 

    }, 
    computed: { 
     categoryFullName:() => { 
      console.log("computed"); 
      return this.isTeam == 1 ? "team" : "single"; 
     } 
    }, 
}); 

現在計算的財產被觸發一次，但不會觸發時，無線電按鈕更改...

我失蹤了什麼？我有它在VueJS 1的工作...

小提琴：https://jsfiddle.net/xoco70/x3sLus6n/21/

Answer 1

當您參考this您的計算機中，不要使用脂肪箭頭。通常，在Vue的，避免使用脂肪箭頭功能的方法，計算機等

computed: { 
    categoryFullName: function() { 
     console.log("computed"); 
     return this.isTeam == 1 ? "team" : "single"; 
    } 
}, 

脂肪箭頭功能結合this詞法。由於Vue使用該函數並將其附加到Vue對象，因此如果使用胖箭頭來定義計算或方法，則this會引用錯誤的對象。