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

带对象的Vuetify组合框多选

  •  0
  • 24sharon  · 技术社区  · 6 年前

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

    仅文本

    show the text only

    全对象显示

    full object display

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

    0 回复  |  直到 6 年前
        1
  •  0
  •   SSaaml    6 年前

    你需要注意 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    5 年前
    
    <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 : "";
            }
    }