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

使用全局Vue.set(object, key, value)使名称被动。

Answer 2

我在更新数据阵列时遇到了同样的问题，但我找到了一种强制Vue实例使用vm.$forceUpdate()手动重新渲染的方法，这里是Vue官方文档中的link

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

我发现v-for中列出的内容需要包含某种类型的列表，例如

更新“页面”时不会重新呈现：

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

Answer 4

使用方括号表示法编辑数组项目不会被反应系统

选中

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

4 个答案: