vuex를 사용하여 Vue 후 vue for

Question

양식을 만들려고하는데이 문제가 발생했는데 해결 방법이 없습니다. Vehicle 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', 
    }, 
    ], 
    }, 
], 
} 

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> 

그래서 당신은 첫 번째 레이블의 I에 볼 수 루핑을 통해 만들고, carid가 selectedType에 저장된 car make가 선택되면, 이제 그 선택에 따라 두 번째 드롭 다운을로드하는 것이 가능합니다. carid 1이 선택되면 목록에 car mod가로드됩니다 주어진 카디 드에서 사용할 수있는 엘 (이 예에서 carid 1)

누군가에게서 듣기를 기대하면서, 나는 여기에 갇혀있다. 나는 이것을하는 방법을 모른다. .. 이것은 지금까지 내가 해왔다. vue-dependon :

건배

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

다음은 달성하기 위해 노력하고이 특정 작업을위한 플러그인입니다.

이 업데이트는 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 등, 적어도. 그리고 할 수있는 방법을 알고 있다면 데이터 구조를 변경하십시오. 제조업체와 모델을 별도의 배열/객체로 나눕니다.