如何通过Vuejs中的代码调用计算属性？

Question

我正在使用Vuejs进行模板和数据绑定。这是我的HTML：

<div id="message"></div> 
<div id="items"> 
    <div v-show="list.length > 0"> 
     <button v-on="click: selectMode = true" 
       v-show="!selectMode">Start Selection</button> 
     <button v-on="click: selectMode = false" 
       v-show="selectMode">End Selection</button> 
     <button v-on="click: selectAll">Select All</button> 
     <button v-on="click: remove">Remove</button> 
    </div> 
    <ul> 
     <list-item v-repeat="list"></list-item> 
    </ul> 
</div> 
<script type="text/html" id="template"> 
    <li> 
     <input type="checkbox" v-show="$parent.selectMode" 
       v-model="selected" name="checkbox" value="{{Id}}" /> 
     <label>{{Name}}</label> 
    </li> 
</script> 

和JS：

var message = document.getElementById("message"); 
var items = [ 
    { Id: 1, Name: "Apple" }, 
    { Id: 2, Name: "Orange" }, 
    { Id: 3, Name: "Banana" }, 
    { Id: 4, Name: "Mango" } 
]; 

var data = { 
    list: items, 
    selectedList: [], 
    selectMode: false 
} 

var vue = new Vue({ 
    el: "#items", 
    data: data, 
    methods: { 
     selectAll: function(){ 
      if(!this.selectMode){ 
       this.selectMode = true; 
      } 

      for(var i = 0; i < this.list.length; i++){ 
       this.list[i].$set("selected", true); 
      } 
     }, 
     remove: function(){ 
      var length = this.selectedList.length; 
      if(length === 0){ 
       show("Nothing to remove"); 
       return; 
      } 

      while(length > 0){ 
       var index = this.selectedList.pop(); 
       this.list.splice(index, 1); 
       length--; 
      } 
     } 
    }, 
    components:{ 
     'list-item': { 
      template: "#template", 
      computed: { 
       selected: { 
        get: function(){ 
         return this.$parent 
          .selectedList 
          .indexOf(this.$index) > 0; 
        }, 
        set: function(value){ 
         show(this.Name + " " + (value ? "Selected" : "Deselected") + " at index: " + this.$index); 
         if(value){ 
          this.$parent 
           .selectedList 
           .$add(this.$index); 
         } 
         else{ 
          this.$parent 
           .selectedList 
           .$remove(this.$index); 
         } 
        } 
       } 
      } 
     } 
    } 
}); 

function show(mess){ 
    message.innerHTML = mess; 
    setTimeout(function(){ 
     message.innerHTML = ""; 
    }, 5000); 
} 

Vuejs正式与绑定列表中的模板，项目被列为预期<li>标签。问题是计算属性：selected。单击此复选框时会触发此属性的设置器，但如果该属性在代码中设置，则不会调用setter。

当“开始选择”按钮被击中时，每个项目都会显示复选框。当用户点击复选框时，计算出的selected属性的setter被调用。但是，如果按下“全选”按钮（将selected属性设置为true），则复选框可见，并且它们会被适当检查，但不会触发属性的设置器，这是意外的。为什么这不起作用？要么我错过了一些东西，要么这是Vuejs中的一个错误。

这是链接到小提琴：http://jsfiddle.net/dreamakshay/c76rwugz/5/。这些是你可以尝试的一些事情。

运行>单击开始选择>勾选复选框（二传手触发）>消息在事业部，和“删除”将删除选定的项目。

运行>单击Select All（全部选中）>按下事业部删除>意外的错误“没有删除”，这是不应该的。

任何帮助表示赞赏。

Answer 1

看来你忘了加上这一行：

selectAll: function(){ 
     if(!this.selectMode){ 
      this.selectMode = true; 
     } 

     for(var i = 0; i < this.list.length; i++){ 
      this.list[i].$set("selected", true); 
      this.selectedList.push(this.list[i]); // This line 
     } 
    }