Bootstrap Vue b-form-select 显示 json 对象

Question

所以我尝试使用 :options 的 json 对象列表来显示 b-form-select。它对所有选项都显示为 null，并且 v-model 不存储任何内容，因为它不知道要存储什么值。

<b-form-select v-model="dropDownSelected" :options="listOptions"></b-form-select>

listOptions 是一个 json 对象数组

dropDownSelected 只是一个值。 listOptions 正在通过 axios 正确填充

axios({
          method: 'get',
          url: 'http://127.0.0.1:8000/Item/?search='+term
        }).then(response =>{
          console.log('idRequest Data: '+response.data);
          if(response.data){
            this.listOptions = response.data
          }
          if (this.listOptions.length === 0) {
            console.log('LIST OF ITEMS EMPTY')
          }
        }

如何在 b-form-select 中正确显示对象列表，并让 v-model 存储指定值？

谢谢

Answer 1

b-form-select 默认等待具有两个属性的对象数组：text 和 value。 我认为您来自 api 的数据结构错误。

https://bootstrap-vue.org/docs/components/form-select

如果这是问题所在，您可以创建一个计算属性来转换并以正确的结构取回您的 listOptions，或者您可以在从服务器加载后对其进行转换。