Vue JavaScript多选选项值不起作用

Question

我有一个问题，在使用值multiselect从API调用中选择多个项目但我得到空白，即使响应是打印在控制台。

多选:

<multiselect mode="tags"
:searchable="true"
:createTag="true"
:multiple="true"
v-model="genre"
:value= 'genreoptions.id'
:options= 'genreoptions.title'
:show-no-results= "false">
</multiselect>      

数据:

data () {
return {
internalValue: this.value,
fname: '',
lname: '',
bday: '05/05/1996',
gender: 'Male',
emailid: '',
bio: '',
profileimg: null,
awards: '',
websiteurl: '',
profession: null,
tags: null,
label: null,
genreoptions: '',
genre: []

}
},
getBasic () {
getApi.get('/createartist',
{
headers: {
'Content-type': 'image/jpeg'
}
}
)
.then(res => {
console.log('first', res.data.genre)
this.genreoptions = res.data.genre
this.options.professionoptions = res.data.profession
this.options.tagsoptions = res.data.tags
})
}

但是现在我在vue模板中什么也得不到但是当数据在控制台打印时，我也得到0值。

我尝试了所有方法，但都无法解决这个问题。

[![Attactched Image Here][1]][1]

Answer 1

感谢@shob帮我解决这个问题

v-if="options.genreoptions"
mode="tags"
:searchable="true"
:createTag="true"
multipleLabel="true"
label='title'
v-model="genre"
:options="options.genreoptions"
valueProp="id"
:show-no-results= "false"
/multiselect>