Question

我使用Vue Devtools。例如，当我在控制台wm.numbers[0]=6上以这种方式更改编号并刷新Vue Devtools并查看时，编号已更改，但甚至Numbers都没有更改。这是什么问题？

JavaScript代码：

var vm = new Vue({
  el:'#app',
  data: {
    numbers: [ 1, 2, 3, 4, 5 ]
  },
  computed: {
    evenNumbers: function () {
      return this.numbers.filter(function (number) {
        return number % 2 === 0
      })
    }
  }
})

HTML代码：

<div id="app">
        <li v-for="n in evenNumbers">{{ n }}</li>
</div>

输出：

2
4

Answer 1

使用Vue.set或vm.$set，或将整个数组替换为新数组。

如Vue Guide: Reactivity In Depth所述：

由于现代JavaScript的局限性（以及   Object.observe），Vue无法检测到属性的添加或删除。   由于Vue在   实例初始化时，数据对象中必须存在一个属性   以便Vue对其进行转换并使其具有反应性。

Vue不允许动态添加新的根级别反应式   已创建实例的属性。 但是，有可能   使用Vue.set（object，将反应性属性添加到嵌套对象   键，值）方法

还有一些与数组相关的警告，已经在List Rendering

中讨论过

var vm = new Vue({
  el:'#app',
  data: {
    numbers: [ 1, 2, 3, 4, 5 ]
  },
  computed: {
    evenNumbers: function () {
      return this.numbers.filter(function (number) {
        return number % 2 === 0
      })
    }
  },
  methods: {
    changeData1: function () {
      this.$set(this.numbers, 0, 6)
    },
    changeData2: function () {
      this.numbers = [ 16, 2, 3, 4, 5 ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
<button @click="changeData1()">Update element with Vue.set or vm.$set</button>
<button @click="changeData2()">replace the whole array</button>
        <li v-for="n in evenNumbers">{{ n }}</li>
</div>

计算出的Vue不起作用

1 个答案: