Блог

Я пытаюсь создать Vuetify combobox с чипами, разделяющими то, что я вставляю в него, в соответствии с разделителями, которые определены для этого компонента, например , . Это означает, что если я вставляю текст a,b,c , компонент должен превратить их в 3 разных чипа: a , b и c , но он не работает как таковой.

• Полный исходный код Vue: https://codesandbox.io/s/chips-so-0gp7g?file=/src/domains/experimental/Experimental.vue
• Предварительный просмотр: https://0gp7g.csb.app/experimental
• Соответствующий фрагмент исходного кода Vue:

 <template>
  <v-container>
    <v-row>
      <v-col>
        <v-combobox
          v-model="chips"
          chips
          :delimiters="[',']"
          append-icon=""
          clearable
          hint="Hey I'm a 🥔 hint!"
          persistent-hint
          label="Type your favorite 🥔s"
          multiple
          solo
          @update:search-input="meowInput"
        >
          <template v-slot:selection="{ attrs, item }">
            <v-chip
              v-bind="attrs"
              close
              :color="getColor(item)"
              @click:close="remove(item)"
            >
              <strong>🥔{{ item }}</strong
              >amp;nbsp;
            </v-chip>
          </template>
        </v-combobox>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import ColorHash from "color-hash";

export default {
  name: "Experimental",
  components: {},
  data() {
    return {
      select: [],
      chips: [],
      search: "", //sync search
    };
  },
  methods: {
    meowInput(e) {
      console.log(e);
    },
    getColor(item) {
      const colorHash = new ColorHash({ lightness: 0.9 });
      return colorHash.hex(item);
    },
    remove(item) {
      this.chips.splice(this.chips.indexOf(item), 1);
      this.chips = [...this.chips];
    },
  },
};
</script>
  

Есть идеи о том, как я могу добиться такого поведения?

Вы могли бы привязать и синхронизировать с изменением search-input , остальное — разделить значение поиска и сопоставить с чипами

search-input : Значение поиска. Может использоваться с .sync модификатором.

 <v-combobox
  // ...
  :search-input.sync="search"
  // ...
>

// ... 

meowInput(e1) {
  if (this.search amp;amp; this.search.split(",").length > 1) {
    this.chips = this.chips.concat(
      this.search.split(",").filter((term) => !this.chips.includes(term))
    );
    this.search = "";
  }
}
  

Разветвленная демонстрация