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

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”。

我现在有另一个要求。我需要将text的值分配给表单中的新变量，我们称其为name。所以当我选择'Option B'form.selection ='B'和form.name ='Option B'。我一直在玩，但似乎无法正确处理。

Answer 1

引导程序选择组件是按这种方式设计的，如果要在选择的数据中包含文本，则必须更改源：

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

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