在Vue select列表的请求和数组中显示主选项？
在Vue select列表的请求和数组中显示主选项？
提问于 2022-06-21 15:30:41
例如，在国家选择列表下拉列表中，我想首先显示最常见的选择选项，但也要显示在它们通常按名称排序的位置沿完整数组。我还计划在其他产品和类别的选择上这样做。
我使用v-select创建选择列表，并能够将“主选项”数组与concat()方法合并：
this.arrNew = this.arrMain.concat(this.arrCountry);
data() {
return {
arrCountry: [],
arrMain: [
{"label":"Brasil","code":1},
{"label":"Estados Unidos","code":136}
],
arrNew: []
}
},但是，正如预期的那样，由于重复的键，我得到了一个Vue警告，并且在select的搜索结果中显示了两次国家。
如何为select选项组合多个数组而不实际合并它们？
我还想把分隔符和文本命名为每个数组。
国家选择的组件代码如下所示：
<template>
<div>
<v-select v-model="$attrs.countryName" id="country" name="country" autocomplete="off" v-validate="'required'" required class="style-select-filter" @option:selected="$emit('changed', $event)" :options="arrNew" placeholder="Selecione um país"></v-select>
<small v-if="errors.has('country')" class="field-text is-danger">{{ errors.first('country') }}</small>
</div>
</template>
<script>
let config = {
headers: {
}
}
export default {
name: "Selectcountry",
inject: ['$validator'],
data() {
return {
arrCountry: [],
arrMain: [
{"label":"Brasil","code":1},
{"label":"Estados Unidos","code":136}
],
arrNew: []
}
},
methods: {
clearTest() {
alert("Teste");
},
searchcountries() {
this.$http.get('country/list', config).then(response => {
this.arrCountry = response.data.pt;
this.arrNew = this.arrMain.concat(this.arrCountry);
}).catch(error => {
console.log(error)
this.errored = true
}).finally(() => this.loading = false);
}
},
created() {
},
mounted() {
this.searchcountries();
},
}
</script>回答 1
Stack Overflow用户
发布于 2022-07-14 14:06:53
我发现的解决方案是将arrMain上的id键从"code“更改为"id”，这样就不会在控制台上得到重复的键警告。此外，我还添加了一个空标签和一个“文本”键来命名和分隔数组。
data() {
return {
arrCountry: [],
arrMain: [
{"label":"","text":"Most used"},
{"label":"Brasil","id":1},
{"label":"Estados Unidos","id":136},
{"label":"","text":"All"}
],
arrNew: []
}
}, 然后是一个带有自定义选项支柱的模板，以显示我想要的方式：
<template #option="{ label, text }">
<p style="font-weight: bold; margin: 0; pointer-events: none" class="pe-none user-select-none">{{ text }}</p>
<span>{{ label }}</span>
</template>我唯一找不到的方法就是阻止下拉列表中的"text“键的选择。指针-事件:无；不工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72703491
复制相关文章
相似问题
腾讯云开发者
