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



所以我试图显示b-form-select,其中包含json对象列表的选项。它显示所有选项为null,并且v-model不存储任何内容,因为它不知道要存储什么值。

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

listOptions是json对象的数组

dropDownSelected只是一个值。列表选项通过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存储指定的值?

谢谢

默认情况下,b-form-select等待具有两个属性的对象数组:textvalue。我认为来自api的数据结构错误。

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

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

最新更新