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

Question

我目前有一个带有几个输入的vue bootstrap表单，一个是select。

        <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设置为我选择的值，因此如果我选择'Option C'，则form.selection也设置为'C'。

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

Answer 1

引导选择组件是以这种方式设计的，如果希望将文本作为您选择的数据的一部分，则必须更改源：

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

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