Vue JavaScript Multi Select 选项值不起作用

Question

我在使用 vue 多选从 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 值 vue 控制台。

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

 [![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>