Question

我是Vue的新手，并从各种教程中改进了这段代码。

但是，我在这里遇到了这个“未定义”的群组名称问题。

html的：

<multiselect 
    v-model="value" 
    :options="options"
    :multiple="true"
    track-by="name"
    :hide-selected="true" 
    :custom-label="customLabel"
    :searchable="false" 
    placeholder="" 
    group-values="details" 
    group-label="groupDivision"
    >
  </multiselect>

的.js：

new Vue({
    components: {
    Multiselect: VueMultiselect.default
    },
    data: {
    value: { groupDivision: 'Government', 
            name: 'Fish', 
            contact: 'Fish@.com' },

    options: [

      { 
        groupDivision: 'Governemnt',
        details:[
        {   name: 'Fish', contact: 'Fish@.com' },
        { name: 'Police', contact: 'Police@.com' },
        { name: 'Society', contact: 'Society@.com' }
        ]  
      },
       { 
        groupDivision: 'Media',
        details:[
        {   name: 'BBC', contact: 'BBC@.com' },
        { name: 'CNN', contact: 'CNN@.com' },
        { name: 'CBC', contact: 'CBC@.com' }
        ]  
      },
    ]
    },
  methods: {
    customLabel (option) {
      return `${option.name}`
    }
  }
}).$mount('#app')

我已经设置了“群组标签”，但仍显示“未定义”。

有谁知道这个问题是什么？提前谢谢！

链接到代码： https://codepen.io/dennis-leeyinghui/pen/VzybrR

Answer 1

已经解决的问题是here，

用此替换您的vue-select：

https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.js

Answer 2

它应该是a bug fixed in v2.0.2，您的代码在最新的vue-multiselect中运行良好检查webpackbin here。

Answer 3

在未使用group-Division等的情况下收到未定义的消息。我的用例是使用简单的自定义标签。我什至尝试根据选择的正确答案建议将multiselect库更新为2.02，但没有用。

这对我有用。我将vue js包从vue2.5更改为vue 2.6.11，它开始起作用。

Vue-Multiselect中的“未定义”组标签？

3 个答案: