Question

我终于发现了一个出色的可搜索选择Vue组件https://github.com/monterail/vue-multiselect。

唯一的问题是，如果您将一个对象数组作为选项提供给它，数据将绑定到整个对象，而不仅仅是值。

这是在我的任务开始前8小时创建奇怪的问题：

https://github.com/monterail/vue-multiselect/issues/263

我一定错过了什么。非常感谢任何帮助。

Answer 1

使用最新版本vue-multiselect，对我来说有用

<multiselect
  v-model="store_front_id"
  track-by="id"
  label="name"
  :options="storefronts.map(i => i.id)"
  :searchable="false"
>
  <template slot="singleLabel" slot-scope="props">
    <span class="option__title">{{ getStoreFrontName(props) }}</span>
  </template>
  <template slot="option" slot-scope="props">
    <span class="option__small">{{ getStoreFrontName(props) }}</span>
  </template>
</multiselect>

computed: {
    ...mapState('storefront', ['storefronts']),
},
methods: {
    getStoreFrontName(props) {
        return this.storefronts.find(i => i.id === props.option).name
    },
}

Answer 2

根据vue-multiselect的文档，它表明：

可用选项的数组：对象，字符串或整数。
如果是对象数组，则可见标签将默认为option.label。
如果labal道具已通过，则标签将等于选项[＆＃39;标签＆＃39;]
@type {Array} * / 选项：{ 类型：数组，要求：是的 }，

因此，它希望绑定到提供列表的整个对象，并且可以将该选项分配给对象的label属性，如下所示：

[... { label：＆＃34; option1＆＃34;，otherdata .. }， { label：＆＃34; option2＆＃34;，otherdata .. }， ] ...

Answer 3

过滤选项并使用自定义标签。

check this github issue

Answer 4

我创建了一个对象，该对象接收在 vue-multiselect 中选择的对象，然后使用“ @input”发送，函数“ listaCidades” ，该函数只会向我的api发送“ id ”，这可能对您有帮助：

<multiselect                          
  v-model="estadoSelecionado"
  :options="listaEstado"
  :multiple="false"      
  label="descricao"
  track-by="descricao"
  :preselect-first="false"
  @input="listaCidades(estadoSelecionado.id)"
></multiselect>

listaCidades(idEstado){
  //send my id selected to my api
  this.$http
    .get(this.$urlAPI + "/cidade/lista/" + idEstado, {
      headers: {
        authorization: "Bearer " + this.usuario.token
      }
    })
    .then(response => {
      if (response.data.status) {            
        this.listaCidade = response.data.listaCidade;            
      }
    })
    .catch(function(error) {
      console.log(error);
    });
}

Vue多选数据绑定

4 个答案: