我正在创建动态表单(例如Google表单),单击添加按钮会创建一张卡片,从下拉菜单中可以选择要使用的输入元素。通过单击添加按钮,新的输入元素对象将添加到数组(form_elements)。每个对象都有一个属性(selectedElement)。当selectedElement为1时,表示文本输入,而2表示下拉输入。 我有一个基于selectedElement显示的div,但是挑战在于,当将一个新对象添加到form_element数组时,selectedElement属性不受索引的约束,因此,当selectedElement为1时,将显示具有该条件的所有div
我尝试使用Vue浏览器扩展进行调试,发现每次从下拉列表中选择一项以为selectedElement提供值时,所有对象中的selectElement属性都会更改为从下拉列表中选择的相同值。
>form_elements: [
{
selectedElement: 0,
element_type: {},
element_question: '',
element_types: [
{
id: 1,
name: 'Text-field',
},
{
id: 2,
name: 'Dropdown-field',
},
{
id: 3,
name: 'Radio-field',
},
{
id: 4,
name: 'Checkbox-field',
},
{
id: 5,
name: 'Text-area-field',
}
],
elements: {
textfield: '',
dropdown: '',
dropdownOptions: [
{
optionText: ''
}
]
},
}
],
onChange(event) {
if (event.target.value == 1) {
this.form_elements.forEach(function (el) {
el.selectedElement = 1;
});
}
if (event.target.value == 2) {
this.form_elements.forEach(function (el) {
el.selectedElement = 2;
});
}
}
<select v-model="el.element_type" class="form-control" @change="onChange($event)">
<option disabled value="" :selected="selected">Please select one element
</option>
<option v-for="element_type in el.element_types" :key="element_type.id"
v-bind:value="element_type.id">
{{element_type.name}}
</option>
</select>