Vue.js 更新仅在其他属性更改时才有效? [英] Vue.js update only works if other property changed?

问题描述

我想知道对我的情况有什么好的方法.考虑以下代码:

<ol><li v-for="todo in todos">{{ todo.text }} + {{todo. added_text}} <button v-on:click="add_text(todo)">do</button></ol>
<script type="text/javascript">var app4 = new Vue({el: '#app-4',数据: {待办事项: [{ text: '学习 JavaScript' },{ text: '学习 Vue' },]},方法: {添加文本(项目){index = this.todos.indexOf(item);this.todos[index]. added_text = "别的东西";//this.todos[index].text = '了解更多';}}})

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

但是，当我更改同一元素中的其他内容时(例如注释行:this.todos[index].text = 'learn more';)，那么 todo.text 和 todo. added_text 都会更新.

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

解决方案

但是，因为这个属性在实例化vue的时候并不是数组元素的一部分，所以这个属性根本就没有出现

是的，你是对的

当您将普通 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)

阅读此处

I was wondering what a good approach is for my situation. Consider the following code:

<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>

I want to add the todo.added_text if the button is pressed. But, because this property was not part of the elements in the array when vue was instantiated, this property does not appear at all (this is my assumption, I could be wrong).

However, when I change something else in the same element (e.g. the commented line: this.todos[index].text = 'learn more';), then both todo.text and todo.added_text update.

My question is, what is a good approach to tell vue that something changed in the element, besides changing some other property of the same element?

解决方案

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

Yes you're right

When you pass a plain JavaScript object to a Vue instance as its data option, Vue will walk through all of its properties and convert them to getter/setters using Object.defineProperty.

The getter/setters are invisible to the user, but under the hood they enable Vue to perform dependency-tracking and change-notification when properties are accessed or modified.

Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive.

You do this with Vue.set(object, key, value) For example

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

Read here

这篇关于Vue.js 更新仅在其他属性更改时才有效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！