vue.js - Vuesax Vx-Select 组件不显示所选标签

Question

我正在通过 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>

Answer 1

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>

Answer 2

这是一个渲染问题，您可以尝试使用 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>

或使用密钥重新加载组件

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