javascript - Vue JavaScript Mutiselect选项值不起作用

Question

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

我尝试了一切，但我无法解决这个问题。

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

标签： javascriptvue.jsvue-componentvuejs3vue-multiselect

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>