Vuesax Vx-Select 组件不显示所选标签答案

【问题标题】：Vuesax Vx-Select component doesn't show selected labelVuesax Vx-Select 组件不显示所选标签
【发布时间】：2021-04-17 06:46:10
【问题描述】：

我正在通过 npm 使用 NuxtJs v2.14 和 vuesax v4.0.1-alpha.25。虽然我使用这些部分代码为 v-select 创建循环，但在选择了一个已创建的选项后，此组件不会向我显示选定的标签。

我在移动设备和 Win OS 或 FireFox、Opera、Safari 和 Chrome 等所有浏览器上尝试并测试了它，但它对我不起作用。

这是我的代码：

<vs-select placeholder="choose your brand" v-model="carBrand">
  <vs-option v-for="(item, index) in brands" :key="index" :label="item.name" :value="item.id">
    {{ item.name }}
  </vs-option>
</vs-select>

【问题讨论】：

标签： vue.js vue-component nuxt.js vuesax

【解决方案1】：

这是一个渲染问题，你可以试试 v-if

<vs-select placeholder="choose your brand" v-model="carBrand" v-if="brands" >
  <vs-option v-for="(item, index) in brands" :key="index" :label="item.name" :value="item.id">
    {{ item.name }}
  </vs-option>
</vs-select>

或者用key重新加载组件

<vs-select placeholder="choose your brand" v-model="carBrand" :key="id" >
  <vs-option v-for="(item, index) in brands" :key="index" :label="item.name" :value="item.id">
    {{ item.name }}
  </vs-option>
</vs-select>

<script>
export default {
  data() {
    return {
      brands: [],
      id: new Date().getTime(),
    };
  },
  methods: {
    onLoadBrands() {
      this.brands = newBrands;
      this.id = new Date().getTime();
    },
  },
};
</script>

【讨论】：

【解决方案2】：

v-if = "array.length > 0" 对我有用。

<vs-select placeholder="choose your brand" v-model="carBrand" v-if="brands.length > 0" >
  <vs-option v-for="(item, index) in brands" :key="index" :label="item.name" :value="item.id">
    {{ item.name }}
  </vs-option>
</vs-select>

【讨论】：