vue.js 在v-select选择中搜索时，所选项目消失

eivgtgni 于 2023-03-24 发布在 Vue.js

关注(0)|答案(2)|浏览(215)

我已经在我的一个项目中实现了类似于此代码笔的东西。
https://codepen.io/sudheer-ranga/pen/bGVbjbx
有一个问题，我面临的，所选项目消失无效搜索.所以，我发现，项目 prop 是变异.此外，我添加了缓存项目 prop ，这确实保持了所选项目完好无损.但现在的搜索不会过滤的项目.
接下来，我添加了一个计算属性，以在搜索后获取更新的项，并在项中更新它。

computed: {
 finalOptions() {
    return this.fruitsCopy;
 }
}

https://codepen.io/nyfer/pen/VwGdKvy
但那也不行。所以，我想知道我该怎么做。

vue.js

来源：https://stackoverflow.com/questions/75758872/selected-items-disappear-during-search-in-v-select-selections

2条答案

按热度按时间

ccgok5k51#

您需要将所选项目推回以进行搜索，请参阅此处codepen.io

// Option 1 forEach
this.selectedFruits.forEach((selectedFruit) => {
    this.fruits.push(selectedFruit);
});
      
// Options 2 spread syntax
this.fruits = [
    ...this.selectedFruits,
    ...this.fruits,
];

赞(0）回复(0）举报 2023-03-24

d7v8vwbk2#

我认为一般的建议是不要实现自己的搜索，而是使用Vuetify的v-autocomplete，这是一个内置搜索功能的选择：

<v-autocomplete
  v-model="selectedFruits"
  :items="fruits"
  attach label="Favorite Fruits"
  multiple
></v-autocomplete>

如果您坚持将输入放在项目列表的顶部，您仍然可以使用之前使用的相同插槽，并使初始输入不可见：
x一个一个一个一个x一个一个二个一个x一个一个三个一个

赞(0）回复(0）举报 2023-03-24

我来回答

vue.js 在v-select选择中搜索时，所选项目消失

2条答案

相关问题

热门标签

最新问答