Vue country and state selection with select2 - vue.js

Question

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>

Answer 1

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/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect#2.1.0/dist/vue-multiselect.min.css">
<script src="https://unpkg.com/vue-multiselect#2.1.0"></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>