Vuetify Combobox множественный выбор с объектом

Question

Мой источник данных:

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

И мне нужно сохранить этот формат.

В моем приложении мне нужна возможность добавления ключей (например, добавить теги), я используюCombobox, и я могу отобразить данные.Но при добавлении нового элемента он не сохраняет формат объекта.

Это мой код:

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