Question

我注意到Vuejs在数组的第一层之后没有观察到数据变化。

如何更改此行为？

mongoose.connect(process.env.MONGODB_URI || 'mongodb+srv://xxx:xxx@cluster0-xucmg.mongodb.net/test?retryWrites=true&w=majority');

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

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

如何使数据在数组后响应？

1 个答案: