Question

我在使用vuejs 1.0 $ set（）时遇到问题，我已经制作了jsfiddle。当addQty1仅更新数据时，addQty2可以正常运行并更新显示。

知道为什么会这样吗？

var TicketLine = Vue.extend({
  template: '#ticketLineTemplate',
  props: ['index', 'lines'],
  data: function() {
    var line = this.lines[this.index];
    return {
      qty: line.qty,
      label: line.label
    };
  },
  methods: {
    addQty1: function() {
      var line = this.lines[this.index];
      line.qty++;
      this.lines.$set(this.index, $.extend({}, line));
    },
    addQty2: function() {
      var line = this.lines[this.index];
      line.qty++;
      this.lines.$set(this.index, line);
    }
  }
});

var lines = [{
  qty: 1,
  label: 'Pizza'
}, {
  qty: 2,
  label: 'Café'
}, {
  qty: 1,
  label: 'Soda'
}];

new Vue({
  el: "#app",
  data: {
    lines: lines
  },
  components: {
    'ticket-line': TicketLine
  }
});

<div id="app">
  <div id="ticket">
    <table class="table">
      <thead>
        <th>Qty</th>
        <th>Label</th>
        <th>Actions</th>
      </thead>
      <tbody>
        <template v-for="line in lines">
          <ticket-line :index="$index" :lines="lines"></ticket-line>
        </template>
      </tbody>
    </table>
  </div>

  <script type="text/x-template" id="ticketLineTemplate">
    <tr>
      <td>{{ qty }}</td>
      <td>{{ label }}</td>
      <td>
        <button type="button" v-on:click="addQty1()">addQty1</button>
        <button type="button" v-on:click="addQty2()">addQty2</button>
      </td>
    </tr>
  </script>
</div>

Answer 1

没有理由将所有线路作为道具传递到每条线路，只需传递当前线路。儿童成分不需要知道所有的内容：

<ticket-line  :index="$index" :line="line"></ticket-line>

var TicketLine = Vue.extend({
template: '#ticketLineTemplate',
props : ['index', 'line'],
data: function() {
    return {
        qty: this.line.qty,
        label: this.line.label
    };
},
methods: {
    addQty1: function() {
        this.qty++;
    }
}
});

https://jsfiddle.net/6zovax1v/1/

至于您遇到此问题的原因，请阅读＆＃34;更改检测警告＆＃34;信息http://vuejs.org/guide/reactivity.html。

编辑：没有深入观察对象。因此，当您更新对象qty属性，然后更新$set对象时，Vue说＆＃34;好的，这是与之前相同的对象，无需更新任何内容＆＃34;。当您创建一个新对象时，Vue会看到一个新对象并知道它需要更新。

~~我相信你可以直接在项目的属性上使用$set来触发更新~~：

addQty1: function() {
        var qty = this.lines[this.index].qty;
        qty++;
        this.lines[this.index].$set('qty',qty);
        );
    },

编辑2：经过测试，该代码对我不起作用。我认为这里最好的解决方案是重构你的结构，这样每一行都是一个只知道自己的组件。我知道你说在你的应用程序中有这个原因，但应该有另一个更合适的解决方案。组件不应该知道整个阵列，这是组件的概念。如果需要互动，您可以使用.sync或事件广播。无论如何抱歉，我无法使代码正常工作，希望你能解决这个问题。

Vue.js $设置不更新显示

1 个答案: