在 b-form-select 中看不到 API 的价值 - Vue.js

Question

我使用 API 来获取用户。我希望将这些用户绑定到 b-form-select (bootstrap-vue)。但在请求后，我在 b-form-select 中看到“null”。我的要求

getAllUsers() {
                axios.get('/GetUsers')
                    .then(res => {
                        this.funds = res.data
                        console.log(this.options1)
                    })
            }

显示数据的表格

<b-form-select
                        id="input-3"
                        v-model="userSelect"
                        :options="funds"
                        required
                ></b-form-select>

但是如果我使用

<select v-model="userSelect" class="form-control">
                <option v-for="user in funds" :key="user.id" :value="user">{{user.name }} {{user.id }}</option>
            </select>

我看到了我的用户。为什么 bootstrap-vue 不能显示我的数据？

Answer 1

b--form-select 将 value 作为选项中 value 属性的默认字段，并将 text 字段作为标签。

如果您想自定义字段属性名称（例如使用名称字段显示文本），您可以通过将 text-field、html-field、value-field 和 disabled-field 属性设置为字符串来轻松更改它们包含您要使用的属性名称：

<b-form-select
       id="input-3"
        v-model="userSelect"
        :options="funds"
       value-field="name"
      text-field="name"
       required
></b-form-select>