Vuetify v-slot：激活器不停止

Question

我有一个触发颜色选择器的文本字段。这也在 v-for 循环中。一切都很好，直到 activator 触发 color-picker 并且多个选择器被 v-for 数据的混搭触发。

您可以在顶部看到数据的混搭，以及激活的多个颜色选择器。

知道为什么吗？我的代码如下：

<v-tab-item>
  <v-card
    flat
    v-for="(colorMenu, index) in colorMenus"
    :key="index"
  >
    <v-card-text>
      <v-row 
        justify="start" 
        align="center">
        <v-col
          cols="4"
        >
        <p class="font-weight-bold text-subtitle-2 mt-4">{{ colorMenu.title }}</p>
        </v-col>
        <v-col
          cols="8"
        >
          <v-text-field 
            v-model="myModels[colorMenu.type]"
            v-mask="mask" 
            hide-details 
            class=""
            solo
          >
            <template 
              v-slot:append
            >
              <v-menu
                v-model="menu" 
                top 
                nudge-bottom="105" 
                nudge-left="16" 
                :close-on-content-click="false"
              >
                <template 
                  v-slot:activator="{ on }"
                >
                  <div
                    :style="{ backgroundColor: selectColors[index],  borderRadius: menu ? '50%' : '4px'}" 
                    v-on="on"
                    class="color_select"
                  />
                </template>
                    <v-color-picker
                      v-model="selectColors[index]" 
                      flat
                    >
                    </v-color-picker>
              </v-menu>
            </template>
          </v-text-field>
        </v-col>
      </v-row>
      <v-divider class="mt-3"></v-divider>
    </v-card-text>
  </v-card>
</v-tab-item>

Answer 1

主要问题是所有 v-menu 都绑定到单个 menu 布尔值，导致所有菜单同时打开和关闭。要解决此问题，请将 menu 设为布尔值数组（就像您对 v-for 中的其他道具所做的那样）。
另一个问题是您的 backgroundColor 绑定到 selectColors[index]，但那是来自 v-color-picker 的对象。该对象有一个 hex 属性，其中包含颜色的十六进制字符串，适用于 backgroundColor 值。

<v-menu                 
        v-model="menu[index]" 
        top 
        nudge-bottom="105" 
        nudge-left="16" 
        :close-on-content-click="false"
        >
  <template v-slot:activator="{ on }">                                       
    <div :style="{ backgroundColor: selectColors[index]?.hex,  borderRadius: menu[index] ? '50%' : '4px'}" 
          v-on="on"
          class="color_select"
          />
  </template>
  <v-color-picker v-model="selectColors[index]" flat>
  </v-color-picker>
</v-menu>

export default {
  data() {
    return { 
      menus: [],
      ⋮
    }
  }
}

demo

Vuetify v-slot：激活器不停止

Vuetify v-slot:activator not stopping

vue.js

vuejs2

vuetify.js