javascript - 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.todos[index].text = 'learn more';)，然后 todo.text 和 todo.added_text 都会更新。

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

Answer 1

But, because this property was not part of the elements in the array when vue was instantiated, this property does not appear at all

是的，你是对的

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

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

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

例如，您可以使用 Vue.set(object, key, value) 执行此操作

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

阅读here