RESOLVE - Vue.js v-select with v-if

Question

I need a little help with v-select. I would like to have two v-select, but one will change when I choose a value on the over. For example :

I have a list of countries (France, England and Spain) I have a list of districts (Alsace, Lorraine, Greater London, Andalousie and Catalogne)

In my first v-select (build like this : )

<v-select style="grid-column: 1; width: 100%" :options="pays" label="title" v-model="paysChoose"></v-select>

I have my list of countries, and I have a v-model to get the name of the country choose. After that, I have a second v-select (build like this : )

<v-select style="grid-column: 1; width: calc(100%-50px)" :options="regions" v-if="regions.pays == paysChoose" label="titre" v-model="regionChoose"></v-select>

I try to filter the list of district in terms of the country selected. So I try with v-if, but It doesn't work (the template doesn't appear). After that I try to filter with a computed value and I try this :

<v-select style="grid-column: 1; width: calc(100%-50px)" :options="renderRegion" label="titre" v-model="regionChoose"></v-select>
computed: {
          renderRegion() {
            return this.regions.filter(item => item.pays == this.paysChoose)
          }
        }

But it still doesn't work (The template appear, but never print the districts when I choose a country)

If someone have a solution i really appreciate it

Thanks by advance

Answer 1

In my opinion, your computed idea seems to be the best one according to your problem.

Note : that I added a clear of the subcountry if the value of the country is changed.

Example

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  computed: {
    subCountryItemsFiltered() {
      return this.subCountry.filter(subCountry => subCountry.country === this.countrySelected)
    }
  },
  data() {
    return {
      country: ['france', 'spain', 'uk'],
      countrySelected: null,
      subCountry: [
        {value: 'Alsace', country: 'france'},
        {value: 'Catalogne', country: 'spain'},
        {value: 'Greater London', country: 'uk'},
      ],
      subCountrySelected: null
    }
  },
})

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css'>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js'></script>

<div id="app" data-app>
  <v-select :items="country" v-model="countrySelected" @change="subCountrySelected = null"></v-select>
  <v-select 
  :items="subCountryItemsFiltered" 
  v-model="subCountrySelected"
  item-text="value"
  ></v-select>
</div>