1

I'm using NuxtJs v2.14 with vuesax v4.0.1-alpha.25 by npm. While I'm using these section code to create my loop for v-select, this component doesn't show me selected label after choosing one of created options.

I tried and tested it by mobile devices and Win OS or every browsers like FireFox, Opera, Safari and Chrome but It hadn't worked for me.

here is my codes:

<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>
Milad Mohammadi
  • 176
  • 1
  • 9

2 Answers2

1

v-if = "array.length > 0" works for me.

<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>
Aidar Gilmanov
  • 11
  • 1
0

it's a render problem, you can try with 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>

or reload component with 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>
Saul
  • 1