[Select] Selected option label is not visible

[demtario]

I'm trying to render options list based on data from async operation (setTimeout in example below). So I created simple v-for on <vs-option> to gets options that I want.

Options are visible, you can change selected option and value changes. But label of selected option is not visible.

Example

https://codesandbox.io/s/still-snowflake-kgjsv?file=/src/App.vue

[mhrahul]

I am sticking with exactly same problem. Need solution urgently. Otherwise cant use new version.

[bchalk101]

I ran into this issue, as a workaround, I have given the vs-option a key that is based on the list - this way every time the key updates the entire component will be rerendered by Vue, and the values will be displayed.

<vs-select :key="list.length">
              <vs-option
                      v-for="field in list"
                      :key="field.name"
                      :label="field.name"
                      :value="field.name"
              >
                {{ field.name }}
              </vs-option>
</vs-select>

[alfgago]

I ran into this issue, as a workaround, I have given the vs-option a key that is based on the list - this way every time the key updates the entire component will be rerendered by Vue, and the values will be displayed.

<vs-select :key="list.length">
              <vs-option
                      v-for="field in list"
                      :key="field.name"
                      :label="field.name"
                      :value="field.name"
              >
                {{ field.name }}
              </vs-option>
</vs-select>

Had the same issue. This was really helpful, thank you!