Vue.js/Vuetify - 別の選択肢に基づいて選択データをフィルタリングする

Question

別の選択肢の選択に基づいて1つの選択肢にデータをフィルタリングする方法を教えてください。何かのように、私はある選択から州を選択し、第2の選択はその特定の州のすべての都市をロードします。 私はフレームワークとしてvue.jsとvuetifyを使用しています（v-selectコンポーネントを使用）。私は計算されたプロパティを設定しようとしましたが、最初のselectから選択した場合でも、2番目のものはデータをロードしません。 https://jsfiddle.net/vcmiranda/tkkhwq6m/

ありがとう：

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@2.4.1/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>

は、ここではjsfiddleリンクです。

Answer 1

あなたがしたいのはfilter都市のオプションです。

は fiddleを更新

filteredData() { 
    let options = this.options.opt_city 
    return options.filter(o => o.dependency == this.support.home_province) 
} 

にごfilteredData計算プロパティを変更

。