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 - 根据另一个选择选项过滤选择数据

回答

相关问题