Vue v-for 后条件使用 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',
    },
   ],
   },
 ],
}

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

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

1-2年没更新了，不过我觉得你可以看看它的源代码，看看它是如何工作的。

更新:
sourcecode 所需要的只是 loadOptions 函数以及 L83 和 L105 之间的代码。
您可以根据需要调整该代码。

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 等。如果可以并且您知道如何去做，请更改您的数据结构 - 将制造商和型号分开 arrays/objects。

Answer 3

您应该创建一个计算的属性 which returns 模型选项基于所选品牌类型的值。然后你可以绑定到它，它会在选定的更改时自动更新：

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>

Vue v-for 后条件使用 vuex

Vue v-for after condition using vuex

javascript

loops

vue.js

vuejs2

vuex