Как сделать выбор целевого элемента?

Question

[Денис]

Всем привет, я на vue новичек, помогите пожалуйста. У меня есть компонент color picker, у него есть массив элементов. Мне нужно при клике на целевой элемент отобразить на нем галочку выбора.
Я пробывал сделать это присвоив v-if visible: false и через метод this.visible = !this.visible, но при клике галочка отображается сразу на двух элементах, предпологаю что здесь необходимо получать индекс элемента из массива и отображать по индексу, пробывал использовать метод с параметром индекс: this.swatches[index].visible = !this.swatches[index].visible, но тоже ничего не выходит, возможно я как то не правильно обращаюсь к элементам.
Может кто подскажет в чем моя ошибка?

data() {
      return {
        visible: false,
        swatches: [
          {
            color: ['#f32261', '#f5d018',],
            }
        ],
      }
    }

<template>
  <div class="container">
    <div id="wrapper">
      <div v-for="swatch in swatches">
          <div class="swatch"
               v-for="(color, index) in swatch.color"
              :key="index"
              :style="{ 'background-color': color}"
              @click="sendDataToParent(color)">
              <div class="swatch_check_circle" v-if="visible">
                <v-icon
                  :color="'#fff'"
                  :style="'color: #fff; font-size: 15px; width: 21px; padding-bottom: 5px'"
                  >mdi-check-bold
                </v-icon>
              </div>
         </div>
      </div>
    </div>
  </div>
</template>

Comments

[obemgcabazn]

Не используйте в :key index. Это плохая практика потому что такое решение отключит предупреждение линтера, но при этом будет работать не так как вы ожидаете.
key должен зависеть от данных экземпляра. Лучше уж генерировать id через nanoid или uuid для каждого color и использовать их.

Answer 1

[Александр Маджугин]

При клике вызывайте метод своего компонента который будет помещать выбранный цвет в отдельную переменную selectedColor.
В шаблоне проверяйте совпадает ли color с selectedColor: v-if="color==selectedColor"

Comments

[Денис]

Можешь еще подсказать, вот если у меня есть кнопки и мне нужно изменять клас только для целевой кнопки, я сделал вот так, но они включаются одновременно, что может быть не так?

data() {
        return {
            isActive: true,
        };
    },
<template>
<button>
:class="isActive ? 'on' : 'off'"
v-on:click ="isActive = !isActive"
</button>
<button>
:class="isActive ? 'on' : 'off'"
v-on:click ="isActive = !isActive"
</button>
<button>
:class="isActive ? 'on' : 'off'"
v-on:click ="isActive = !isActive"
</button>
</template>

[Александр Маджугин]

Денис, ну естественно. А как ты проверяешь что кнопка целевая? Где?
Как ты целевую кнопку отличаешь от не целевой?

[Денис]

я не понимаю,можете пояснить пожалуйста как?

[Александр Маджугин]

Денис, вот вы говорите "мне нужно изменять клас только для целевой кнопки" - ок. Где целевая кнопка?
Если у вас все кнопки одинаковые и не связаны не с чем, то никакой целевой кнопки и нет. Поэтому как для нее изменить класс?
Чем целевая кнопка отличается от остальных?
Если опираться на ваш код из комментария - там просто три одинаковых кнопки. Что вы имеете ввиду говоря "целевая"?