Is there a way to filter data in order to populate one select based on the selection made in another select? For example, if I choose a state from one select, can I have a second select loaded with all cities from that specific state? I am using vue.js and vuetify as my framework, with the v-select component. I have attempted to set up a computed property, but the second select does not load the data even after making a selection from the first one.
HTML
Vue.use(Vuetify);
var app = new Vue({
el: '#app',
data() {
return {
items: {
home_id: null,
},
support: {
home_province: '',
},
options: {
opt_province: [{
text: 'British Columbia',
value: 1
}, {
text: 'Ontario',
value: 2
}],
opt_city: [{
text: 'Vancouver',
value: 1,
dependency: 1
}, {
text: 'Surrey',
value: 1,
dependency: 1
}, {
text: 'London',
value: 1,
dependency: 2
}, {
text: 'Toronto',
value: 1,
dependency: 2
}]
}
}
},
computed: {
filteredData() {
var city = this.options.opt_city;
var province = this.support.home_province;
for (var i = 0; i < city.length; i++) {
if (city[i].dependency != province.value) {
city.splice(i);
}
}
return city;
},
}
})<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
<v-app>
<v-card class="grey lighten-4 elevation-0">
<v-card-text>
<v-container fluid>
<v-layout row wrap>
<v-flex xs4>
<v-flex>
<v-subheader>Origin Province</v-subheader>
</v-flex>
<v-flex>
<v-select :items="options.opt_province" v-model="support.home_province" label="Select" class="input-group--focused" single-line>
</v-select>
</v-flex>
</v-flex>
<v-flex xs4>
<v-flex>
<v-subheader>Origin City</v-subheader>
</v-flex>
<v-flex>
<v-select :items="filteredData" v-model="items.home_id" label="Select" class="input-group--focused" single-line autocomplete>
</v-select>
</v-flex>
</v-flex>
</v-layout>
</v-container>
</v-card-text>
</v-card>
</v-app>
</div>Here is the link to the jsfiddle: https://jsfiddle.net/vcmiranda/tkkhwq6m/
Thank you.