推送和更改项目时,Vuejs列表不会reRender

Question

我想将一些数据推送到项目,并使用另一个列表名称来引用一些数据.

  <div v-for="item in items" track-by='$index'>
    {{item.id}} - {{names[item.id].value}}
  </div>

修改名称时,列表没有像预期的那样reRender.

这是我的问题的演示.

https://jsfiddle.net/sumy/ep0d28j7/

单击" 添加ME"时,我希望所有相同的键具有相同的值.但......

Answer 1

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

http://vuejs.org/guide/reactivity.html#Change-Detection-Caveats

使用 globalVue.set(object, key, value)使名称具有反应性。

Answer 2

更新数据数组时，我也遇到了同样的问题，但是我发现一种方法可以强制使用vm.$forceUpdate()此Vue官方文档上的链接手动重新渲染Vue实例。

// vue instance
var vm = new Vue({
    el: "#app",
    data: {
        array: ["", "", "", "", "", "", "", "", ""]
    },
    methods: {
        handleClick: function(i) {
            // update your data array
            this.array[i] = "some string";

            // force the instance to be re-rendered
            vm.$forceUpdate();
        }
    }
}