vue联动列表

Vue联动列表是指在vue框架下，通过选取一个列表后，会自动根据所选项的不同，更新相关联的选项列表。下面是一个基本的示例：

div id="app">
    select v-model="selectedCountry">
    option v-for="country in countries" :value="country">
{
{
 country.name }
}
    /option>
    /select>
    select v-model="selectedCity">
    option v-for="city in cities" :value="city">
{
{
 city.name }
}
    /option>
    /select>
    /div>

在上面的代码中，我们有两个下拉列表：一个是选择国家，一个是选择城市。在这里我们有两个关联的数组: countries和cities。我们将首先选择一个国家，然后基于所选国家更新城市列表。

var app = new Vue({
el: '#app',data: {
selectedCountry: '',selectedCity: '',countries: [{
id: 1, name: '美国'}
,{
id: 2, name: '英国'}
,{
id: 3, name: '法国'}
],cities: [{
id: 1, countryId: 1, name: '纽约'}
,{
id: 2, countryId: 1, name: '洛杉矶'}
,{
id: 3, countryId: 2, name: '伦敦'}
,{
id: 4, countryId: 2, name: '曼彻斯特'}
,{
id: 5, countryId: 3, name: '巴黎'}
,{
id: 6, countryId: 3, name: '南特'}
]}
,computed: {
filteredCities: function() {
    var self = this;
return this.cities.filter(function(city) {
    return city.countryId === self.selectedCountry.id;
}
    );
}
}
,watch: {
selectedCountry: function(newValue, oldValue) {
    this.selectedCity = '';
}
}
}
    );
    

在这里我们需要知道的是filteredCities这个计算属性，这将是基于选择的国家，过滤出相关的城市。我们将v-model指向selectedCountry和selectedCity，这将确保我们总是有一个选择的国家和城市。最后，我们使用watch方法，当选择的国家发生变化时，它会将selectedCity设置为“”。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！