vuexを使用したVue v-for後処理

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> 

だから、私は最初のラベルに見ることができるようにcariedがselectedTypeに保存されているcar makeが選択されると、その選択に従って2番目のドロップダウンをロードすることができるので、carid 1が選択されている場合、リストはcar modをロードします（この例ではカリッド1で）利用可能なels

誰かから聞いて、私はここにこだわっています。私はこれを行う方法を知らない...これまでのところ私はやっているvue-dependon：

乾杯

Answer 1

選択したメイクタイプの値に基づいてモデルオプションを返す計算プロパティを作成する必要があります。そして、あなたはそれに結合することができ、選択したが、変更を加えるたびに、自動的に更新されます：私はこれは私が必要とする正確に何である

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

は、ここであなたが達成しようとしているこの特定のタスクのためのプラグインです。

これは1-2年間更新されていませんが、ソースコードを確認して動作を確認できます。

UPDATE：
あなたがsourcecodeから必要なのはloadOptions機能とL83とL105の間のコードです。
必要に応じてそのコードを適用することができます。あなたのデータを

Answer 3

の作業例：あなたができる場合は、変更が簡単な整数に 'modelid'

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>

から1、2、など、少なくとも。また、できることがわかっていれば、データ構造を変更して、メーカーとモデルを別々のアレイ/オブジェクトに分けることができます。