Vue.js/Vuetify - 根據另一個選擇選項過濾選擇數據

如何過濾數據以根據另一個選擇的選擇來填充一個選擇？類似的，我從一個選擇中選擇一個狀態，第二個選擇加載來自該特定狀態的所有城市。我使用vue.js和vuetify作爲框架（與v選擇組件）。我試圖設置一個計算屬性，但即使從第一個選擇中選擇，第二個也不會加載數據。Vue.js/Vuetify - 根據另一個選擇選項過濾選擇數據

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>

這的jsfiddle鏈接：https://jsfiddle.net/vcmiranda/tkkhwq6m/

感謝。

來源

2017-07-20 Vitor Miranda

你想要做的是filter城市選項。

您filteredData計算屬性更改爲

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

更新fiddle。

來源

2017-07-20 21:01:24 Bert

偉大的人，它的工作完美。謝謝。 –

@VitorMiranda不客氣:)這是你的第一個問題，我會提到這一點;在未來，如果答案可以幫助你或者回答你的問題，你可以用upvote（當你有rep的時候）或者接受的方式表示。 – Bert

感謝您的警告，我不知道。 –

Vue.js/Vuetify - 根據另一個選擇選項過濾選擇數據

回答

相關問題