问题描述
我有2个对象数组,如下所示。我需要为每个questions
元素创建一个select,并且需要使这些选项通过id与selections
连接。在这种情况下,我需要选择2个选项,第一个选择将具有1000
,5000
和10000
作为选项,而第二个选择将具有yes
和{{1} }作为选项
no
我在Vue中做到了这一点,但是问题是我无法将数据保存在v模型中,因为我要从const questions = [{
'id': 1,'question': 'KM'
},{
'id': 2,'question': 'Works'
}
]
const selections = [{
'question_id': 1,'value': 1000
},{
'question_id': 1,'value': 5000
},'value': 10000
},{
'question_id': 2,'value': 'yes'
},'value': 'no'
}
]
返回值,而不是在{{1}中指定的变量}
cars()
最终,我只需要知道,当我具有上面定义的结构时,如何获取值?
解决方法
如果您在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
},'value': 10000
},{
'question_id': 2,'value': 'yes'
},'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',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>
通过这种方式,您可以根据需要自由地存储或处理数据,但必须手动进行。