javascript - Vue v-for after 条件使用 vuex

Question

当我尝试创建表单时遇到了这个问题，但我没有任何解决方案。 有一个关于车辆制造商和车辆型号的 Vuex 数据，现在一旦选择了制造商，我希望其他形式循环遍历所选制造商并查找其他型号......类似的东西。

这是我到目前为止所做的:

cars.js -(vuex 模块)

const state = {
  make: [
   {
    name: 'Audi',
    carid: '1',
    models: [
     {
     modelid: '1.1',
     name: 'A7',
     },
     {
     modelid: '1.2',
     name: 'A8',
     },
    ],
   },
   {
   name: 'BMW',
   carid: '2',
   models: [
    {
    modelid: '2.1',
    name: '5 Series',
    },
    {
    modelid: '2.2',
    name: '7 Series',
    },
   ],
   },
 ],
}

汽车.vue

<template>
<div class="labelos">
              <div class="label-name">
                <h4>Car make:</h4>
              </div>
              <div class="label-body">
                <label for="car-make">
                  <select v-model="selectedType" name="carmake" required>
                    <option value=""></option>
                    <option  v-for="(cars, index) in cars.make" :key="index" :value="cars.carid">{{ cars.name }}</option>
                  </select>
                </label>
              </div>
            </div>
            <div class="labelos">
              <div class="label-name">
                <h4>Car model:</h4>
              </div>
              <div class="label-body">
                <label for="car-model">
                  <select>
                    <option value=""></option>
                    <option v-for="(model, index) in cars.make" :key="index" :value="cars.carid">{{ model.carid }}</option>
                  </select>
                </label>
                Model:
              </div>
            </div>
    </template>
<script>
import { mapState } from 'vuex';
export default {
  name: 'cars',
  data() {
    return {
      selectedType: '',
      selectedCity: '',
    };
  },
  methods: {

  },
  components: {
    Headers,
    Footers,
  },
  computed: {
    ...mapState([
      'cities', 'cars',
    ]),
  },
};
</script>

因此，正如您在第一个标签上看到的，我正在循环遍历品牌，一旦选择了汽车品牌，carid 就会保存在 selectedType 上，现在如何根据该选择加载第二个下拉列表，所以如果 carid 1 是选择后，列表将加载给定 carid 上可用的车型(在本例中为 carid 1)

期待收到某人的来信，我被困在这里..我不知道如何做到这一点的任何解决方案...这是到目前为止我所做的

干杯

Answer 1

您应该创建一个计算属性，该属性根据所选 make 类型的值返回模型选项。然后您可以绑定(bind)到它，每当选定的更改时它就会自动更新:

models() {
  if (this.selectedType) {
    return this.cars.make.find((car) => car.carid === this.selectedType).models;
  }
}

这是一个工作示例:

const store = new Vuex.Store({
  state: {
    cars: {
      make: [{
        name: 'Audi',
        carid: '1',
        models: [
          { modelid: '1.1', name: 'A7' },
          { modelid: '1.2', name: 'A8' },
        ]
      }, {
        name: 'BMW',
        carid: '2',
        models: [
          { modelid: '2.1', name: '5 Series' },
          { modelid: '2.2', name: '7 Series' }
        ],
      }]
    }
  }
})


new Vue({
  el: '#app',
  store,
  data() {
    return {
      selectedType: '',
    };
  },
  computed: {
    ...Vuex.mapState(['cars']),
    models() {
      if (this.selectedType) {
        return this.cars.make.find((car) => car.carid === this.selectedType).models;
      }
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<div id="app">
  <h4>Car make:</h4>
  <select v-model="selectedType" name="carmake" required>
    <option value=""></option>
    <option  v-for="(cars, index) in cars.make" :key="index" :value="cars.carid">{{ cars.name }}</option>
  </select>

  <h4>Car model:</h4>
  <select>
    <option value=""></option>
    <option v-for="(model, index) in models" :key="index" :value="model.modelid">{{ model.name }}</option>
  </select>
</div>