Question

我正在尝试动态填充和排序v-select使用的数组。但是我遇到了es-lint警告，“计算属性中的意外副作用”，因为我正在对该调用中的对象进行突变。是否存在用于将新数据追加到数组并进行排序的更合适的模式？这是一些快速且肮脏的框架代码，可帮助您理解要点

// SomeFile.vue
<MySelectComponent :someData="changingArray" />

// MySelectComponent.vue
<v-select v-model="selectedItems" :items="mergeWithNewData" >
...

props: { 
  someData: Array,
},
data: () => ({
  selectedItems: [],
  holdsEverything: [],
},
computed: {
  mergeWithNewData() {
    this.someData.forEach(item => {
      if (!this.holdsEverything.includes(item)){
        this.holdsEverything.push(item);
        this.holdsEverything.sort();
      }
    });
    return this.holdsEverything;
  },
}

作为一个例子，比方说，changeingArray以['a'，'b'，'c']开始。在代码运行时，changeingArray现在为['b'，'z']。 holdEverything应该是['a'，'b'，'c'，'z']

Answer 1

好像您想要someData中排序的不同值。使用计算型时，无需将数据推送到另一个数组，只需按以下方式返回计算结果：

computed: {
  mergeWithNewData () {
    return [...new Set(this.someData)].sort()
  }
}

或者使用watch代替computed：

<v-select v-model="selectedItems" :items="holdsEverything" >  
// use holdsEverthing directly

watch: {
  someData (newval) {
    newval.forEach(item => {
      if (!this.holdsEverything.includes(item)){
        this.holdsEverything.push(item)
      }
    })
    this.holdsEverything.sort()
  }
}

Vuetify v-select动态填充/排序

1 个答案: