代码之家 › 专栏 › 技术社区 › ekjcfn3902039

Vuetify v-select动态填充/排序

vuetify.js vue.js

ekjcfn3902039 · 技术社区 · 5 年前

我正在尝试动态填充和排序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;
  },
}

例如,假设changingArray以['a','b','c']开头。当代码运行时,数组现在是['b','z']。holdsEverything应该是['a','b','c','z']

1 回复 | 直到 5 年前

akuiper 5 年前

看起来您需要从 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()
  }
}

推荐文章

Veer3383 · 如何更改/覆盖Vuetify js中禁用字段的默认颜色?

6 年前

Peter Krauss · emit go modal在其他实例中什么都不做,如何调用modal?

6 年前

Yuri F Becker · 在vue中以编程方式创建表单

6 年前

L. Gangemi · Vue+Vuetify扩展面板输入/离开动画

6 年前

niutech · 如何异步验证Vuetify文本字段?

6 年前

Jay Vignesh · VueJs-在方法之间传递变量

6 年前

JustStartedProgramming · 在Vuejs中读取HTML响应以在对话框中显示

6 年前

Raluca · 在滑块中获取居中元素的对象

6 年前

tobiasg · 将new Date()与v-Date-picker一起使用不起作用

6 年前

IsraGab · 动态内容到v-expansion-panel-content

6 年前