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

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 作为选项中值属性的默认字段，并将 text 字段作为标签。

If you want to customize the field property names (for example using name field for display text) you can easily change them by setting the text-field, html-field, value-field, and disabled-field props to a string that contains the property name you would like to use:

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

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

Can't see value from API in b-form-select - Vue.js

javascript

vue.js

vue-component

vuejs2

bootstrap-vue