只有当其他属性发生更改时，Vue.js更新才能工作？

Question

我在想对我的处境有什么好办法。考虑以下代码：

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }} + {{todo.added_text}} <button v-on:click="add_text(todo)">do</button>
    </li>
  </ol>
</div>

<script type="text/javascript">
    var app4 = new Vue({
        el: '#app-4',
        data: {
            todos: [
              { text: 'Learn JavaScript' },
              { text: 'Learn Vue' },
            ]
        },
        methods: {
            add_text(item){
                index = this.todos.indexOf(item);
                this.todos[index].added_text = "something else";
                // this.todos[index].text = 'learn more';
            }
        }
    })
</script>

如果按下按钮，我想添加todo.added_text。但是，因为当vue被实例化时，这个属性不是数组中元素的一部分，所以这个属性根本没有出现(这是我的假设，我可能错了)。

但是，当我在同一个元素中更改其他内容时(例如，注释行: this.todosindex.text = 'learn‘；)，那么todo.text和todo.added_text都会更新。

我的问题是，除了改变同一元素的其他属性之外，有什么好的方法可以告诉vue，元素中的某些东西发生了变化？

Answer 1

但是，因为当vue被实例化时，此属性不是数组中元素的一部分，因此该属性根本不出现。

是的，你说得对

当您将普通的JavaScript对象作为其数据选项传递给Vue实例时，Vue将遍历其所有属性，并使用Object.defineProperty将它们转换为getter/getter。

getter/getter对用户是不可见的，但是在幕后，它们使Vue能够在访问或修改属性时执行依赖跟踪和更改通知。

Vue无法检测属性的添加或删除。由于Vue在实例初始化期间执行getter/setter转换过程，因此必须在数据对象中显示一个属性，以便Vue对其进行转换并使其具有反应性。

例如，您可以使用Vue.set(object, key, value)来完成此操作。

Vue.set(vm.someObject, 'b', 2)

读取这里

Answer 2

您可以通过分配给反应性元素来获得反应性。this.todos[index]已经是反应性的，所以如果您重新分配整个事件，所有的部分将是反应性的。因为它是一个数组元素，所以您必须使用set，但是可以对整个对象使用它一次，而不是对每个添加的成员使用它：

        add_text(item){
            const index = this.todos.indexOf(item);
            const newObject = Object.assign({}, item, {
                text: 'learn more',
                added_text: 'something else'
            });

            this.$set(this.todos, index, newObject);
        }