如何使用选定的选项值显示div?

时间:2019-08-27 07:41:14

标签: javascript vue.js vuejs2

我正在创建动态表单(例如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>

0 个答案:

没有答案