Question

我在理解bootstrap-vue中的b-form-select时遇到了麻烦。

我有一个可以说的对象列表

factories = [{ id: 1, name: "A" }, { id: 2, name: "B" }]`

我选择为

<b-form-select
  v-model="factory"
  :options="factories"
  value-field="id"
  text-field="name"
/>

但是我将如何获取完整的选定对象而不是id，而不必手动声明选项？

这行得通，但是感觉很“ hacky”。

<b-form-select v-model="factory">
  <option v-for="f in factories" :value="f" :key="f.id">{{f.name}}</option>
</b-form-select>

如果不可能，为什么有任何原因？

Answer 1

这不起作用，因为<b-form-select>要求options数组采用以下形式：

[{value: factory, text: factory.name}]

换一种说法，<b-form-select>不知道如何处理[{id: 1, name: 'A'}]

要使第一个表单正常工作，您需要将数组“ factories”转换为可以使用的数组：

const factories = [{ id: 1, name: "A" }, { id: 2, name: "B" }]

var factoriesSelectList = []

factories.forEach((factory, index, mechanicsArray) => {
    var selectListOption = {
       value: factory,
       text:  factory.name
    }

    factoriesSelectList.push(selectListOption)
})

然后，在您的模板中：

<b-form-select
  v-model="factory"
 :options="factoriesSelectList"
/>

注意：这可能与第二种形式的模板中的操作没有太大不同。我没看过，但我敢打赌产生的javascript是相似的。

b-form-select获取选定的选项作为值

1 个答案: