Vue.js/Vuetify - Filter select data based on another select choice

11,094

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.

Share:
11,094

Related videos on Youtube

Vitor Miranda
Author by

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, 2022

Comments

  • Vitor Miranda
    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
    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
    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
    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
    Fernando Torres over 3 years
    <a class='gotoLine' href='#"[Vue warn'>"[Vue warn</a>: Error in beforeCreate hook: \&quot;Error: Vuetify is not properly initialized, see vuetifyjs.com/getting-started/…\&quot; found in ---&gt; &lt;VApp&gt; &lt;Root&gt;"]