Question

我使用的是vue版本2.5.x

如下所示。

无论我点击多少辛苦＆＃34;添加项目＆＃34;按钮，页面中没有项目显示。

但是＆＃34;添加项目版本2＆＃34;作品！

添加:key无法获得帮助。有什么问题？

＆＃13;

let app = new Vue({
  el: "#app",
  data: {
    items: {},
    count: 0,
  },
  methods: {
    add() {
      this.items[this.count.toString()] = this.count;
      this.count++;
      console.log(this.items);
    },
    add2() {
      let items = {}
      items[this.count.toString()] = this.count;
      this.items = items;
      this.count++;
      console.log(this.items);
    }
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <button @click="add">add item</button>
  <button @click="add2">add item version 2</button>
  <p v-for="(item, key) in items" :keys="item">{{item}}</p>
</div>

＆＃13;

Answer 1

替换： this.items [this.count.toString（）] = this.count;

Vue.set（this.items，this.count.toString（），this.count）;

let app = new Vue({
  el: "#app",
  data: {
    items: {},
    count: 0,
  },
  methods: {
    add() {
        Vue.set(this.items,this.count.toString(),this.count);

      this.count++;
      console.log(this.items);
    },
    add2() {
      let items = {}
      items[this.count.toString()] = this.count;
      this.items = items;
      this.count++;
      console.log(this.items);
    }
  }
})

https://jsfiddle.net/zbb57ozv/

这是javascript或Vue js警告的限制。有关详细信息，请查看 vue文档的更改检测警告部分：Vue-Js Reactivity In Depth

数据更改后，Vue v-for对象不会更新

1 个答案: