I want to list the states of the country in 2nd selection (JSON) format when country is selected in 1 selection I want to make with vuejs. I can do this with normal select but I want to do it in "select2" action. I have not seen or encountered an example of it anywhere.

For example, when France is chosen as the country. in the second option i want the states of france to be listed

Please answer considering that you are a beginner when writing an answer.

select2 or vue-select

[
    {
        "country": "America",
        "plate": 1
    },
    {
        "country": "France",
        "plate": 2
    },
    {
        "country": "Holland",
        "plate": 3
    },
    {
        "country": "China",
        "plate": 4
    },
    {
        "country": "state",
        "plate": 5
    }
]

[
  {
    "id": 1,
    "country": "America",
    "state": "Texas"
  },
  {
    "id": 2,
    "country": "America",
    "state": "NewMexico"
  },
  {
    "id": 3,
    "country": "America",
    "state": "Montana"
  },
  {
    "id": 4,
    "country": "France",
    "state": "Normandy"
  },
  {
    "id": 5,
    "country": "France",
    "state": "Paris"
  },
  {
    "id": 6,
    "country": "France",
    "state": "Occitanie"
  },
  {
    "id": 7,
    "country": "Holland",
    "state": "Köln"
  },
  {
    "id": 8,
    "country": "Holland",
    "state": "Brüksel"
  },
  {
    "id": 9,
    "country": "China",
    "state": "Gansu"
  },
    {
    "id": 10,
    "country": "China",
    "state": "Hubei"
  },  
  {
    "id": 11,
    "country": "China",
    "state": "Hainan"
  },
    {
    "id": 12,
    "country": "Iraq",
    "state": "Erbil"
  },
    {
    "id": 13,
    "country": "Iraq",
    "state": "Bagdat"
  }
]

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <label class="my-1 mr-2">countries</label>
                <select class="custom-select my-1 mr-sm-2 form-control" v-model="selected" @change="getState()">
                    <option v-if="selected === 'Choose'">Choose</option>
                    <option v-for="item in countries" v-bind:key="item.id">{{ item.country}}
                    </option>
                </select>
            </div>

            <div class="col-md-4 ">
                <label class="my-1 mr-2">state</label>
                <select class="custom-select my-1 mr-sm-2 form-control">
                    <option v-if="selectedCountry === false">Choose</option>
                    <option v-for="list in states" v-bind:key="id">{{ list.state}}</option>
                </select>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selected: 'Choose',
            countries: {},
            states: [],
            selectedCountry: false,
        }
    },
    created() {
        this.getCounty()
    },
    methods: {
        getCounty() {
            axios.get('json/country.json')
                .then(res => this.countries = res.data)
        },
        getState() {
            this.selectedCountry = true
            this.states = []
            axios.get('json/states.json')
                .then(res => {
                    res.data.forEach(i => {
                        if (this.selected === i.country) {
                            this.states.push(i.state)
                        }
                    })
                })
        }
    }
}
</script>

CodePudding user response：

You can prepare data and use vue-multiselect :

Vue.config.productionTip = false
new Vue({
  el: '#demo',
  components: { Multiselect: window.VueMultiselect.default },
  data() {
    return {
      options: [ 
        {"id": 1,"country": "America", "plate": 1}, {"id": 2,"country": "France","plate": 2},
        {"id": 3,"country": "Holland","plate": 3}, {"id": 4,"country": "China","plate": 4},
        {"id": 5,"country": "state","plate": 5}
      ],
      states: [
        {"id": 1,"country": "America","state": "Texas"},
        {"id": 2,"country": "America","state": "NewMexico"},
        {"id": 3,"country": "America","state": "Montana"},
        {"id": 4,"country": "France","state": "Normandy"},
        {"id": 5,"country": "France","state": "Paris"},
        {"id": 6,"country": "France", "state": "Occitanie" },
        {"id": 7,"country": "Holland","state": "Köln"},
        {"id": 8,"country": "Holland","state": "Brüksel"},
        {"id": 9,"country": "China","state": "Gansu"},
        {"id": 10,"country": "China","state": "Hubei"},  
        {"id": 11,"country": "China","state": "Hainan"},
        {"id": 12,"country": "Iraq","state": "Erbil"},
        {"id": 13,"country": "Iraq","state": "Bagdat"}
      ],
      value: '',
      statesSel: [],
      selectedCountry: '',
    }
  },
  methods: {
    getCounty() {
      //axios.get('json/country.json')
         //.then(res => this.countries = res.data)
    },
    getStates() {
     //axios.get('json/states.json')
        //.then(res => {this.states.push(i.state)
    },
    updateSelected: function(newValue) {
      this.selectedCountry = '';
      this.statesSel = this.states.filter(s => s.country === newValue.country)
    }
    
  },
  created() {
    this.getCounty()
    this.getStates()
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<script src="https://unpkg.com/[email protected]"></script>
<div id="demo">

  <div class="row">
      <div class="col-md-4 col-md-ofset-2 form-group">
        <label class="typo__label">Select with search</label>
        <multiselect v-model="value" placeholder="İl"  :multiple="false" :options="options" label="country" track-by="country" :allow-empty="false" @select="updateSelected">
        </multiselect>
        
      </div>
    <div class="col-md-4 col-md-ofset-2 form-group">
        <label class="typo__label">Select with search</label>
        <multiselect v-model="selectedCountry" placeholder="İlçe" :multiple="false" :options="statesSel" label="state" track-by="state" :allow-empty="false">
        </multiselect>
      </div>
  </div>
</div>