Question

当我尝试创建表单时遇到了这个问题，我没有任何解决方案。车辆制造和车辆模型有一个Vuex数据，现在一旦选择了make，我希望另一个表格循环选择Make并找到其他模型......就像这样。

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

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',
    },
   ],
   },
 ],
}

Cars.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类型的值返回模型选项。然后你可以绑定到它，它会在所选的make更改时自动更新：

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

这是一个有效的例子：

＆＃13;

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;
      }
    }
  },
})

＆＃13;

<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>

＆＃13;

Answer 2

您的数据的工作示例：

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'}
      ]
    }
  ]
}

new Vue({
  el: '#app',
  data: {
    state: state,
    selected: 0
  },
  computed: {
    models () {
      var maker = this.state.make.find(m => m.carid === this.selected)
      return maker ? maker.models : []
    }
  }
})

<div id="app">
  <select v-model="selected">
    <option value="0" selected>Choose maker</option>
    <option
      v-for="maker in state.make"
      :key="maker.carid"
      :value="maker.carid"
    >{{ maker.name }}</option>
  </select>
  <br>
  <select>
    <option value="0" selected>Select model</option>
    <option
      v-for="model in models"
      :key="model.modelid"
      :value="model.modelid"
    >{{ model.name }}</option>
  </select>
</div>

<script src="https://unpkg.com/vue@2.5.3/dist/vue.min.js"></script>

如果可以，至少将'modelid'更改为简单整数 - 1,2等。如果可以，并且您知道如何做，请更改您的数据结构 - 将制造商和模型划分为单独的数组/对象。

Answer 3

这是您尝试完成此特定任务的插件：vue-dependon。

它已经更新了1 - 2年，但我认为您可以检查其源代码并查看其工作原理。

更新：
sourcecode所需要的只是loadOptions功能和L83和L105之间的代码。
您可以根据需要调整该代码。

Vue v-for after条件使用vuex

3 个答案: