如何從多個 vue select 實例中獲取值？

Question

我有 2 個對象數組，如下所示。 我需要為每個questions元素創建一個選擇，並且我需要通過 id 將選項與selections聯。 在這種情況下，我需要有 2 個選擇，第一個將有1000 、 5000和10000作為選項，而第二個選擇將有yes和no作為選項

const questions = [{
        'id': 1,
        'question': 'KM'
    },
    {
        'id': 2,
        'question': 'Works'
    }
]

const selections = [{
        'question_id': 1,
        'value': 1000
    },
    {
        'question_id': 1,
        'value': 5000
    },
    {
        'question_id': 1,
        'value': 10000
    },
    {
        'question_id': 2,
        'value': 'yes'
    },
    {
        'question_id': 2,
        'value': 'no'
    }
]

我在 vue 中做到了這一點，但問題是我無法將數據保存在 v-model 中，因為我正在返回來自cars()的值而不是data()指定的變量

<div class="form-group" v-for="item in questions" v-bind:key="item.question">
    <h5 v-if="showQuestion(item.id)">{{ item.question }}</h5>

    <div class="tour-options-select" v-if="showQuestion(item.id)">
        <select id="select-suggestions" name="tour-options-dropdown" class="tour-options-dropdown" v-model="questions.value">
            <option v-for="item1 in cars(item.id)" v-bind:key="item1.id" :value="item1.display_name">{{ item1.display_name }}</option>
        </select>
    </div>
</div>

最終，我只需要知道，當我有一個像我上面定義的結構時，我如何獲得價值？

Answer 1

如果你在data()有一個數組來存儲你選擇的選項，你可以使用v-model動態綁定該數組中的元素，如果你給它一個索引：

 new Vue({ el: '#app', data: { questions: [{ 'id': 1, 'question': 'KM' }, { 'id': 2, 'question': 'Works' } ], selections: [{ 'question_id': 1, 'value': 1000 }, { 'question_id': 1, 'value': 5000 }, { 'question_id': 1, 'value': 10000 }, { 'question_id': 2, 'value': 'yes' }, { 'question_id': 2, 'value': 'no' } ], selected: [], }, methods: { cars: function(id) { return this.selections.reduce((arr, currSel) => { if (currSel.question_id == id) arr.push(currSel); return arr; }, []); }, } });

 <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script> <div id="app"> <div v-for="(question, index) in questions" :name="question.question" :key="question.id"> <select v-model="selected[index]"> <option v-for="option in cars(question.id)" :key="option.question_id" :value="option.value"> {{ option.value }} </option> </select> </div> <p>Selected:</p> <pre>{{ $data.selected }}</pre> </div>

另一種方法是使用事件來處理更改，每次用戶進行選擇時調用自定義函數，例如使用@change ：

 new Vue({ el: '#app', data: { questions: [{ 'id': 1, 'question': 'KM' }, { 'id': 2, 'question': 'Works' } ], selections: [{ 'question_id': 1, 'value': 1000 }, { 'question_id': 1, 'value': 5000 }, { 'question_id': 1, 'value': 10000 }, { 'question_id': 2, 'value': 'yes' }, { 'question_id': 2, 'value': 'no' } ], }, methods: { cars: function(id) { return this.selections.reduce((arr, currSel) => { if (currSel.question_id == id) arr.push(currSel); return arr; }, []); }, } });

 <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script> <div id="app"> <div v-for="(question, index) in questions" :name="question.question" :key="question.id"> <select @change="console.log('Option', $event.target.value, 'chosen for Q', question.id)"> <option selected disabled>Select...</option> <option v-for="option in cars(question.id)" :key="option.question_id" :value="option.value"> {{ option.value }} </option> </select> </div> </div>

這種方式將使您更自由地根據需要存儲或處理數據，但您必須手動進行。