Question

在使用Vuetify的大型Vue应用程序中，我在整个应用程序中使用了以下可重复使用的组件：

<template>
  <v-combobox
    v-model="input"
    :items="available"
    :item-value="itemValue"
    :item-text="itemText"
    :label="label"
    :disabled="disabled"
    :hint="hint"
    chips
    multiple
    persistent-hint
    @input="myInput"
  >
    <template slot="selection" slot-scope="data">
      <v-chip
        :close="!disabled"
        @input="remove(data.item)"
      >
        <strong>{{ data.item.code }}</strong>
      </v-chip>
    </template>
  </v-combobox>
</template>

<script>
export default {
  name: 'BaseSelectChip',
  props: {
    hint: String,
    value: Array,
    label: String,
    available: Array,
    disabled: Boolean,
    itemText: {
      type: String,
      required: true,
    },
    itemValue: {
      type: String,
      required: true,
    },
  },
  computed: {
    input: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  methods: {
    myInput(items) {
      this.input = [...this.items];
      this.$emit('input', items);
    },
    remove(item) {
      const newItems = this.input.slice();
      newItems.splice(this.input.indexOf(item), 1);
      this.$emit('input', newItems);
    },
  },
};
</script>

，通常这样使用：

<BaseSelectChip
  label="Liveness Options"
  :value="tenantBiometricLiveness"
  :available="getAvailableLiveness"
  :disabled="!hasBiometric"
  itemValue="code"
  itemText="name"
  :hint="livenessHint"
  @input="livenessUpdated"
/>

至此，我的应用程序中的所有实现都允许多个选择，但是我有一种情况希望将其限制为单个选择。根据{{3}}，它是一个布尔值，但也表示此道具Accepts array for value。另外，它声明默认值为false，但是当它自己传递给v-combobox时，它允许选择多个选项。如果我像这样在BaseSelectChip中定义道具：

props: {
  multiple: {
    type: Boolean,
    default: true,
  },
}

，然后将其传递给v-combobox

  <v-combobox
    v-model="input"
    :items="available"
    :item-value="itemValue"
    :item-text="itemText"
    :label="label"
    :disabled="disabled"
    :hint="hint"
    chips
    :multiple="multiple"
    persistent-hint
    @input="myInput"
  >

无论我如何从父组件传递它，我的屏幕都是空白，并且没有任何控制台警告，这告诉我Veutify在某个地方默默地死去。

当我从multiple元素中删除v-combobox时，即使字段中没有项目（items道具），我的字段中还是有一个空白项目： docs

此外，如果有有效值传递给该字段，则删除multiple道具会由于某些原因而导致数据值不显示（与无数据时的结果相同，如上所述）

所以我的问题是： 1）如何根据multiple的需要，将<BaseSelectChip>属性的值传递给v-combobox（然后传递给v-combobox）？ 2）如何配置组合框以仅允许一次选择一个项目，并且仅在实际选择一个项目时才显示筹码？

更新：要在下面实现@skirtle的建议：我这样修改了BaseSelectChip：

  <v-combobox
    v-model="input"
    :items="available"
    :item-value="itemValue"
    :item-text="itemText"
    :label="label"
    :disabled="disabled"
    chips
    :multiple="multiple"
    @input="myInput"
  >

...

props: {
  multiple: {
      type: Boolean,
      required: false,
      default: true,
    },
  },

，然后在父组件中添加:multiple="false"。这似乎很好用，但是现在有一个副作用：在BaseSelectChip中，myInput发出的值（来自组合框上的@input事件）是{{1 }}，而不是Observer。这会在父组件中引起问题，因为它正在寻找数组。为什么要使用观察者？

Answer 1

任何type为Boolean的道具都可以使用速记来传递true。所以当你写：

<v-combobox multiple>

那只是以下内容的简写：

<v-combobox :multiple="true">

这不是Vuetify特有的，它是Vue的常规行为，并适用于所有组件。

在您的情况下，您已将默认值设置为true，因此您需要显式传递false：

<BaseSelectChip
  :multiple="false"
>

请小心在前面加上:，否则它将传递字符串'false'，这是非常不同的。

您在文档中提到了一个条目：

接受值数组

这意味着，如果将multiple设置为true，则value的{{1}}属性将是一个数组。在您的代码中，您不是直接设置道具v-combobox，而是通过value设置道具。

如果将v-model设置为multiple，则false将不期望使用数组。当您使用value时，这会双向影响您。您似乎有几行假设该值将是一个数组，因此需要更改它们。

这可能就是为什么您看到单个空芯片的原因。我猜您正在传递一个空数组。但是，将v-model设置为multiple时，它将只是将该数组视为所选值。在这种情况下，没有对数组的特殊处理，就像其他任何值一样。它将为false和[].code寻找[].name和item-value，它们将为item-text。

如何在Vuetify v-combobox组件中配置“多个”道具以进行单选

1 个答案: