带有对象的Vuetify Combobox多选答案

【问题标题】：Vuetify Combobox multiselect with object带有对象的Vuetify Combobox多选
【发布时间】：2019-02-26 05:48:11
【问题描述】：

我的数据源是：

[
  {
    "display": "client",
    "value": "client"
  }, 
  {
    "display": "firstname",
    "value": "firstname"
  }, 
  {
    "display": "lastname",
    "value": "lastname"
  }
]

而且我需要保持这种格式。

在我的应用程序中，我需要添加键（如添加标签），我使用组合框，并且可以显示数据。但是当添加一个新元素时，它并没有保持对象格式。

这是我的代码：

  <v-combobox
    v-model="password.keys"
    label="Add keys"
    chips
    item-text="display"
    item-value="value"

    prepend-icon="filter_list"
    solo
    multiple
  >
    <template slot="selection" slot-scope="data">
      <v-chip
        :selected="data.selected"
        close
        @input="remove(data.item)"
      >
        <strong>{{ data.item.display }}</strong>&nbsp;
      </v-chip>
    </template>
  </v-combobox>

纯文字

完整的对象显示

如何在保持对象格式的同时添加新对象？

【问题讨论】：

您可以在将新元素添加到 password.keys 数组后“手动”创建对象。为此，您可以深入观察对象或将事件处理程序 @change 添加到组合框，一旦触发更改，检查数组中的字符串元素并根据需要将它们转换为对象
也许“值比较器”是我要找的，但我不知道如何使用它https://vuetifyjs.com/en/components/combobox#combobox
display 和 value 总是相同的值？
是的，现在显示和数值是一样的

标签： vue.js combobox vuetify.js

【解决方案1】：


<v-combobox :return-object="false">
    <template slot="selection" slot-scope="data">
      <v-chip
        :selected="data.selected"
        close
        @input="remove(data.item)"
      >
        <strong>{{ getItemText(data.item) }}</strong>&nbsp;
      </v-chip>
    </template>
</v-combobox>

methods: {
        getItemText(val) {
            const item = this.tags.find((i) => i.value === val);
            return item ? item.text : "";
        }
}

【讨论】：

【解决方案2】：

您需要注意v-model=password.keys 以将值作为对象返回，因为我们的项目是对象数组。

    watch: {
        'password.keys' (val, prev) {
          if (val.length === prev.length) return

          this.password.keys = val.map(v => {
            if (typeof v === 'string') {
              v = {
                display: v,
                value: v
              }
              this.items.push(v)
            }

            return v
          })
        }
      }

【讨论】：