Vue v-for后條件，使用vuex

Question

在嘗試創建表單時，遇到了這個問題，我沒有任何解決方案。 在Vehicles Make和Vehicle Model上有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',
    },
   ],
   },
 ],
}

賽車

<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

您應該創建一個計算出的屬性，該屬性將根據所選制造類型的值返回模型選項。 然后，您可以綁定到該文件，並且只要選定進行更改，它將自動更新：

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> 

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年，但我認為您可以檢查其源代碼並查看其工作方式。

更新 ：
您需要的源代碼就是loadOptions函數以及L83和L105之間的代碼。
您可以使該代碼適合您的需求。