在VUE选择列表的开始和数组中显示主要选项？

Question

例如，在国家 /地区选择列表下拉列表中，我想先显示最常见的选项选项，但也要在整个阵列沿通常按名称的位置显示它们。我还计划在其他选择产品和类别的选择上执行此操作。

我正在使用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的搜索结果中显示了两次国家。

如何在不实际合并的情况下将多个阵列组合为选择选项？

我还想将分隔线和文字放置以命名每个数组。

我选择国家 /地区的组件代码是这样的：

<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>

Answer 1

我发现的解决方案是将ARRMAIN上的ID键从“代码”更改为“ 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>

我唯一找不到的方法是在下拉列表中的“文本”键上阻止选择。指针盛会：无；不起作用。