Vuejs 列表在推送和更改项目时不会重新渲染

Question

我想把一些数据推到项，并使用另一个列表名称来引用一些数据。

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

当修改名称时，列表没有按预期呈现

这是我的问题的一个演示。

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

当单击Add ME时，我希望所有相同的键具有相同的值。但是…

Answer 1

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

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

使用全局Vue.set(object, key, value)使名称具有响应性

Answer 2

我在更新数据数组时遇到了同样的问题，但我找到了一种方法来强制Vue实例使用vm.$forceUpdate()手动重新渲染这里是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();
        }
    }
}

Answer 3

使用方括号符号编辑数组项不会被反应性系统接收

Answer 4

我发现任何与v-for一起列出的东西都需要用某种类型的列表包装，例如

当'pages'更新时不渲染:

  <v-ons-card v-for="(page, index) of pages" v-bind:key="index"
      @click="push(page.component, page.label)"
  >
     <div class="title">{{ page.label }}</div>
     <div class="content">{{ page.desc }}</div>
  </v-ons-card>

当'pages'更新时DOES更新:

<ul>
      <v-ons-card v-for="(page, index) of pages" v-bind:key="index"
          @click="push(page.component, page.label)"
      >
         <div class="title">{{ page.label }}</div>
         <div class="content">{{ page.desc }}</div>
      </v-ons-card>
</ul>