如何使用 V-Model 表单选择中的选项中的文本属性

Question

我目前有一个带有多个输入的 vue 引导表单，其中一个是选择。

        <b-form-select id="myInput"
                  :options="listOfOptions"
                  v-model="form.selection"
                  required>
        </b-form-select>

选项为：

                listOfOptions: [                  
                { 
                    text: 'Option A', 
                    value: 'A'
                },
                { 
                    text: 'Option B', 
                    value: 'B' 
                },
                { 
                    text: 'Option C', 
                    value: 'C' 
                },
               ],

正如预期的那样，当我选择一个时，它会将 form.selection 设置为我选择的值，所以如果我选择“选项 C”，那么 form.selection 也设置为“C”。

我现在有另一个要求。我需要将文本的值分配给表单中的新变量，我们称之为名称。因此，当我选择“选项 B”时 form.selection = 'B' 和 form.name = '选项 B'。我一直在玩，但似乎无法正确。

Answer 1

引导选择组件就是这样设计的，如果想要将文本作为您选择的数据的一部分，您必须更改源：

  listOfOptions: [                  
            { 
                text: 'Option A', 
                value: {
                   text: 'Option A', 
                   value: 'A'
                }
            },
            ...
  ]

现在，form.selection 是您拥有的对象。