在 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>