如何根据另一个 Select 过滤数据以填充一个 Select ?比如,我从一个 Select 中 Select 一个州,第二个 Select 加载了该特定州的所有城市.

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>

这里是JSFIDLE link:https://jsfiddle.net/vcmiranda/tkkhwq6m/

谢谢

推荐答案

filter个选项是你想做的.

filteredData计算(computed)属性更改为

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

更新fiddle.

Vue.js相关问答推荐

将事件监听器绑定到动态元素

为什么在Vue.js中修改非react 性似乎是react 性的?

如何在与父集合相同的读取中取回子集合(或重构数据?)

绑定事件在渲染函数中不起作用

Vuejs - 更新数组中对象的数组

如何从mustache内的过滤器输出html

如何使用 vue.js 和 vue 路由实现当前路由的子菜单的子菜单

如何对对象数组进行 v-model

在下拉菜单上使用箭头键滚动

如何为使用 Vuex store的 Vue 表单组件编写 Jest 单元测试?

在textbox文本框 VueJS 2 中键入时搜索列表

如何判断 Vue 组件是否处于活动状态

如果我观看解构的props,Vue 3 手表将无法正常工作

vuejs中通过变量动态调用方法

Vuetify v-btn 路由活动类问题

Vue.js 拦截器

如何在 Vue.js 插槽范围内传递方法

在 Chrome DevTools 中实时更改时 destruct 了 Vue.js 应用程序(Webpack 模板)的页面样式

在 Vue 应用程序中创建一个类的单个实例

TypeError: Object(...) 不是 Vue 中的函数