Vuetify v-slot:activator not stopping

Question

I have a text-field that's triggering a color-picker. This is inside a v-for loop as well. All is fine until the activator triggers the color-picker and multiple pickers are triggered with a mashup of the v-for data.

You can see the mashup of data at the top, as well as mutliple color pickers activated.

Any idea why? My code is below:

<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

1. The main problem is all the v-menu's are bound to the single menu Boolean, causing all the menus to open and close at the same time. To resolve this, make menu an array of Booleans (like you've done with the other props within the v-for).

2. Another issue is your backgroundColor is bound to selectColors[index], but that's an object from the v-color-picker. The object has a hex property that contains the hex string of the color, which would be appropriate for the backgroundColor value.

<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