Question

基本上，我正在对从prop获取其值的数组进行排序，因为我们知道prop的值不会改变（或者至少是我在文档中读到的值），但是当我对数组进行删除时，它也会影响道具：

props: ['allquestions','getskills'],
data() {
  return {
    getskillsnew: this.getskills,
    searchwindow: true,
    allquestionsnew: this.allquestions,
  }
},
methods: {
  filterop(value){
    for (i = this.allquestionsnew.length - 1; i >= 0; --i) {
      if (this.allquestionsnew[i].lastweek === 0) {
        this.$delete(this.allquestionsnew, i);
      }
      setTimeout(() => {
        this.searchwindow = true;
      }, 1000) 
    }
  }
}

所以在for循环完成后，我检查了我的prop（所有问题），它已减少为5，就像this.allquestionsnew一样，但是我想让这个接合仅对{{1 }}不在道具上！

我该如何实现？谢谢

Answer 1

在JavaScript中，数组是通过引用传递的。来自Vue docs ..

请注意，JavaScript中的对象和数组是通过引用传递的，因此如果prop是数组或对象，则使对象或数组本身发生突变子组件中的元素将影响父状态。

要解决此问题，您需要为数组创建一个deep clone。例如..

data() {
   return {
      getskillsnew:this.getskills,
      searchwindow:true,
      allquestionsnew: JSON.parse(JSON.stringify(this.allquestions)),
   }

},

这只会在创建组件时初始化allquestionsnew数组。如果您需要在道具更改时更新其值，则可以使用观察者来完成。

Answer 2

这不是一个好习惯。如果您有道具-那么您应该通过父母对其施加影响。如果您想要设置与道具相等的数据，请在生命周期挂钩中进行操作：

created() {
    this.allquestionsnew = [...this.allquestions]
}

您可以看到，这里我使用了数组解构（ES6）。这将比您做的更好。

Vuejs道具不断变化

2 个答案: