代码之家 › 专栏 › 技术社区 › 24sharon

带对象的Vuetify组合框多选

vuetify.js combobox vue.js

0

24sharon · 技术社区 · 7 年前

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

仅文本

全对象显示

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

0 回复 | 直到 7 年前

1

0

SSaaml 7 年前

你需要注意 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
          })
        }
      }

2

0

Dmitriy Nazarov 6 年前


<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 : "";
        }
}