Vue-select: changing the v-model and upgrade select

[DmitrySkibitsky]

When data changes in the v-model, select does not respond visually.
Please tell me how to solve it

Version ^3.0.2

<template>
  <div>
    <div class="row titles_top">
      <div class="col-md-6 col-12 my-auto">
        <template v-if="currentCategory !== null">
          <h1 class="category_title">{{currentCategory.name}}</h1>
        </template>
        <template v-else-if="currentType !== null">
          <h1 class="category_title">{{currentType.name}}</h1>
        </template>
      </div>
      <div class="col-md-3 col-6 sort righted my-auto">
        <p>Сортировка:</p>
      </div>
      <div class="col-md-3 col-6 my-auto">
        <v-select v-model="sort"
                  :clearable="false"
                  :reduce="option => option.value"
                  :options="options"
                  label="name">
        </v-select>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Sort',
    props: ['currentCategory', 'currentType', 'selectFilters'],
    data() {
      return {
        sort: this.$route.query.sort,
        options: [
          {value: 'all', name: 'все товары'},
          {value: 'from_cheap_to_expensive', name: 'от дешевых к дорогим'},
          {value: 'from_expensive_to_cheap', name: 'от дорогих к дешевым'},
          {value: 'popular', name: 'популярные'},
          {value: 'new', name: 'новинки'},
          {value: 'promotional', name: 'акционные'},
        ]
      }
    },
    watch: {
      '$route.query.sort': function (value) {
        this.sort = value;
      },
      'sort': function (value) {
        console.log(this.sort);
        this.$router.push({ query: Object.assign({}, this.$route.query, { sort: value }) });

        this.$emit('updateSort', value);
      }
    }
  }
</script>

[de-don]

I have the same problem

[aispark]

I have the same problem....

[DmitrySkibitsky]

@aispark I then tried vue-multiselect and eventually wrote my selects on it. You can both reset and change the data. Looks like this package doesn't fit the SPA.

[MacgyverMartins]

Hi guys. I made this workaround that works for me
Put your own key prop for v-select and update it every time u change v-model outside v-select

// template
<v-select
  :key="seletcKey"
  :options="entities"
  label="name" 
  v-model="entityId"
  :reduce="item => item.id"
>

// js
data: {
  return() {
    selectKey: 0,
    entityId: null,
  }
}

Then, every time you change v-model call this.selectKey += 1.
This will force v-select to re-rendering. 🤷‍♂

Ex:

  watch: {
    someProp(val) {
        this.entityId = val;
        this.seletcKey += 1;
      }
  },

I don't know if it work for multiple select