Javascript Vue.js向绑定对象添加属性

我有一张这样的单子

<div class="list-group entity-list">

   <a  v-for="entity in master.data"
       :class="['entity list-group-item', entity.selected ? 'selected' : '']"
       @click="itemselect(entity)"
   >
      @{{entity.name}}
   </a>
</div>

---

所示方法似乎不起作用/触发更改

而不是更改您的主数据，使用

$index

跟踪模型中的选择，假设您不重新排序

主数据

<div class="list-group entity-list">
    <a  v-for="entity in master.data"
        :class="eClass[$index]"
        @click="itemselect($index)"
            >
        @{{entity.name}}
    </a>
</div>

methods: {
    itemselect: function(idx) {
        if ( 0 > this.selected.indexOf(idx) ) {
            this.selected.push(idx)
        }
    }
}
computed : {
    eClass : function () {
        var r=[];
        for (var i= 0;c=this.master.data[i];++i) {
            r[i] = {'selected': -1 < this.selected.indexOf(i),'entity list-group-item':true};
        }
        return r;
    }
}

---

假设不重新排序

主数据，则使用
$index
跟踪模型中的选择，而不是更改主数据

<div class="list-group entity-list">
    <a  v-for="entity in master.data"
        :class="eClass[$index]"
        @click="itemselect($index)"
            >
        @{{entity.name}}
    </a>
</div>

methods: {
    itemselect: function(idx) {
        if ( 0 > this.selected.indexOf(idx) ) {
            this.selected.push(idx)
        }
    }
}
computed : {
    eClass : function () {
        var r=[];
        for (var i= 0;c=this.master.data[i];++i) {
            r[i] = {'selected': -1 < this.selected.indexOf(i),'entity list-group-item':true};
        }
        return r;
    }
}

如果要修改道具传入的数据，则需要复制该数据，如果您试图直接修改道具，vue将发出警告。我可能会这样做：

new Vue({
  el: '#app',
  created() {
    // Assume this is passed in by a prop
      var myData = {master: {
        data: [{
          name: 'foo'
        }, {
          name: 'bar'
        }, {
          name: 'baz'
        }]
      }};

    // Copy data from prop
    myData.master.data.forEach(el => {
      var obj = {
        name: el.name,
        selected: false
      };

      this.master.data.push(obj);
    });
  },
  methods: {
    itemselect(item) {
      this.master.data.forEach(el => {
        // if this element is selected set to true      
        el['selected'] = (el.name == item.name);
      });
    }
  },
  data() {
    return {
      master: {
        data: []
      }
    }
  }
});

我只是模拟了输入的实际数据，但显然这会将其添加到一个道具中，并像往常一样将其传递给组件。下面是JSFIDLE:
如果您想要修改道具传入的数据，那么您需要复制它，如果您试图直接修改道具，vue将抛出警告。我可能会这样做：

new Vue({
  el: '#app',
  created() {
    // Assume this is passed in by a prop
      var myData = {master: {
        data: [{
          name: 'foo'
        }, {
          name: 'bar'
        }, {
          name: 'baz'
        }]
      }};

    // Copy data from prop
    myData.master.data.forEach(el => {
      var obj = {
        name: el.name,
        selected: false
      };

      this.master.data.push(obj);
    });
  },
  methods: {
    itemselect(item) {
      this.master.data.forEach(el => {
        // if this element is selected set to true      
        el['selected'] = (el.name == item.name);
      });
    }
  },
  data() {
    return {
      master: {
        data: []
      }
    }
  }
});

我只是模拟了输入的实际数据，但显然这会将其添加到一个道具中，并像往常一样将其传递给组件。以下是JSFIDLE：

new Vue({
  el: '#app',
  created() {
    // Assume this is passed in by a prop
      var myData = {master: {
        data: [{
          name: 'foo'
        }, {
          name: 'bar'
        }, {
          name: 'baz'
        }]
      }};

    // Copy data from prop
    myData.master.data.forEach(el => {
      var obj = {
        name: el.name,
        selected: false
      };

      this.master.data.push(obj);
    });
  },
  methods: {
    itemselect(item) {
      this.master.data.forEach(el => {
        // if this element is selected set to true      
        el['selected'] = (el.name == item.name);
      });
    }
  },
  data() {
    return {
      master: {
        data: []
      }
    }
  }
});