Vue.js/Vuetify - Filter select data based on another select choice
What you want to do is filter the city options.
Change your filteredData
computed property to
filteredData() {
let options = this.options.opt_city
return options.filter(o => o.dependency == this.support.home_province)
}
Updated fiddle.
Related videos on Youtube
Vitor Miranda
Web Developer with professional experience in designing and developing user interfaces, testing and debugging. Ability in optimizing web functionalities that improve data retrieval and workflow efficiencies. Solid project management background. Dedicated to supporting the growth of other team members.
Updated on June 04, 2022Comments
-
Vitor Miranda almost 2 years
How can I filter data to populate one select based on the choice of another select? Something like, I choose an state from one select and a second select is loaded with all cities from that specific state. I'm using vue.js and vuetify as framework (with v-select component). I've tried to set a computed property, but even when I choose from first select, the second one doesn't load data.
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/[email protected]/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 it is jsfiddle link: https://jsfiddle.net/vcmiranda/tkkhwq6m/
Thanks.
-
Bert over 6 years@VitorMiranda You're welcome :) This being your first question ever, I'll mention this; in the future, if an answer helps you or answers your question, you can indicate that with an upvote (when you have the rep) or an accept.
-
Bert over 6 years@VitorMiranda Oh, it was not a warning. I had just noticed you were new. It is always entirely up to you whether you want to or not :)
-
Vitor Miranda over 6 years@Bent Evans, no problem at all, I was just thanking you. And yes, I'm new here. lol
-
Fernando Torres over 3 years<a class='gotoLine' href='#"[Vue warn'>"[Vue warn</a>: Error in beforeCreate hook: \"Error: Vuetify is not properly initialized, see vuetifyjs.com/getting-started/…\" found in ---> <VApp> <Root>"]