Vue 多选数据绑定答案

【问题标题】：Vue Multiselect Data BindingVue 多选数据绑定
【发布时间】：2017-07-04 20:22:21
【问题描述】：

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

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

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

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

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

【问题讨论】：

看来这就是我期望它的工作方式。这会给您带来什么问题？
我也希望他们有一个解决方案，只将值绑定回模型，但它似乎不支持这一点。将其与名称/值对一起使用时，我遇到了类似的问题。我只想回传值，而名称只是用作标签/显示。我只是使用了一些 javascript 从 vue-multiselect 组件中找出值并将其映射到我的代码中的一个变量。这是一个 hack，但它有效。

标签： javascript binding autocomplete vue.js multi-select

【解决方案1】：

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

let types = [
  {id: 1, name: "john"},
  {id: 2, name: "steve"}
];

<multiselect 
  v-model="rule.id" 
  :options="types.map(type => type.id)" 
  :custom-label="opt => types.find(x => x.id == opt).name">
</multiselect>

更多信息请查看此 github issue。

【讨论】：

【解决方案2】：

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

可用选项数组：对象、字符串或整数。
如果是对象数组，可见标签将默认为 option.label。
如果labal prop 被传递，label 将等于 option['label']
@type {数组} */ 选项： { 类型：数组，要求：真 },

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

[... { 标签：“选项1”，其他数据.. }, { 标签：“选项2”，其他数据.. }, ]...

【讨论】：

【解决方案3】：

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

<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);
    });
}

【讨论】：

【解决方案4】：

使用最新版本 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
    },
}

【讨论】：