时间戳

首页 > 解决方案 > 使用 v-slot 和 v-chip 不允许编辑芯片

vue.js - 使用 v-slot 和 v-chip 不允许编辑芯片

问题描述

如果该元素有错误，我正在尝试以编程方式更改 v-combobox 内芯片的颜色。

我之前只是在使用带有芯片的 v-combobox。这允许通过双击来编辑芯片。这是一个允许编辑的代码笔，类似于我使用的允许编辑的代码笔。 https://codepen.io/hassaan97/pen/ZEYWveE

由于我想更改单个芯片的颜色，因此我将 v-slot 与 v-chip 组件一起使用。但是，一旦我这样做了，当我单击它们时，我将无法再编辑它们。这是具有相同问题的类似示例。https://codepen.io/hassaan97/pen/KKwzZNY

这是我的代码-

             <v-combobox
              v-model="emails"
              multiple
              :search-input.sync="syncEmail"
              :chips="true"
              :deletable-chips="true"
              :clearable="true"
              :error-messages="errorMessage"
              @click:close="remove(data.item)"
              :background-color="white"
            >

              <template v-slot:selection="data">
                <v-chip close :color="getColor(data.item)" @click:close="remove(data.item)">
                  <strong>{{ data.item }}</strong>&nbsp;
                </v-chip>
              </template>

标签： vue.jsvuejs2vuetify.js

解决方案

选择槽公开了一个select功能：

<template v-slot:selection="data">
  <v-chip @click="data.select">

https://codepen.io/kaelwd/pen/ZEYWvMQ

这是默认芯片的功能
以及插槽中可用的所有内容

推荐阅读