Vuetify 组合框多选对象

Question

我的数据源是：

[
  {
    "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>

纯文本

完整对象显示

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

Answer 1

您需要观察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
          })
        }
      }