计算属性不触发

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会引用错误的对象。