如何使数据在数组后具有反应性？

Question

我发现Vuejs在数组的第一级之后没有观察到数据变化。

如何更改此行为？

new Vue({
  el: '#container',
  data: {
    value: [],
  },
  beforeMount() {
    this.value[0] = 'first level'
    this.value[1] = []
    this.value[1][0] = 'second level'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="container">
  value[0] :
  <input type="text" id="container" placeholder="enter text" v-model="value[0]">
   <span>{{ value[0] }}</span>
  <hr>
  value[1][0] :
  <input type="text" id="container" placeholder="enter text" v-model="value[1][0]">
  <span>{{ value[1][0] }}</span>
</div>

Answer 1

您的问题是由于Vue reactivity system的主要警告：

请参见下面的工作片段：

new Vue({
  el: '#container',
  data: {
    value: [],
  },
  methods:{
    updateValue(event){
      this.$set(this.value, 1, [event.target.value])
    }
  },
  beforeMount() {
    this.value[0] = 'first level'
    this.value[1] = []
    this.value[1][0] = 'second level'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="container">
  value[0] :
  <input type="text" id="container" placeholder="enter text" v-model="value[0]">
   <span>{{ value[0] }}</span>
  <hr>
  value[1][0] :
  <input type="text" id="container" placeholder="enter text" @input="updateValue" :value="value[1][0]">
  <span>{{ value[1][0] }}</span>
</div>

请注意，如果您尝试这样做

updateValue(event){
    this.value[1][0] = event.target.value
    console.log(this.value[1][0]) //the value has changed but the UI is not refreshed
 }

您将遇到同样的问题：由于您所做的基本上是修改数组中的一项（同一对象中的一个属性相同），这意味着您的数组是相同的，因此Vue无法知道您的用户界面需要重新渲染。

Vue.$set（或this.$set）明确告诉Vue数据已被修改，迫使其重新呈现相应的DOM元素。

[$set接受三个参数：第一个是要更新的对象/数组（this.value），第二个是需要修改的索引/属性（1），第三个是新值

如果您不修改一个数组项，而是重新分配了整个数组，也将起作用：

 updateValue(event){
      this.value = [...this.value[0], [event.target.value]]
 }