Как обрабатывать нажатый элемент в V-If

Question

У меня есть один палитр цветов для каждой ячейки, но когда я щелкаю событие показа палитры цветов, он открывает всех в таблице вместо того, чтобы щелкнуть. Как я могу это сделать? Любой совет?

<template>
  <table>
    <thead>
      <tr>
          <th>Escuela</th>
          <th>Color</th>
        </tr>
    </thead>
    <tbody v-for="institution in institutions">
       <tr>
         <td>
          <p>{{ institution.name }}</p>  
         </td>
         <td>
          <div class="task">
          <span class="current-color" :style="'background-color: ' + institution.color" @click="toggleItem()"></span>
            <sketch-picker v-model="institution.color" v-show="toggled" />
          </div>
         </td>
       </tr>
     </tbody>
  </table>
</template>

А

<script>
  import { Sketch } from 'vue-color'
  import { Chrome } from 'vue-color'
  export default {
    data() {
      return {
        institutions:[
          {
            name: "UANL",
            color: "#6b5b95"
          },
          {
            name: "CONALEP",
            color: "#feb236"
          },
          {
            name: "ESCUELA",
            color: "#d64161"
          }
        ],
        toggled: false,
      }
    }, 
    components: {
      'chrome-picker': Chrome,
      'sketch-picker': Sketch,
    },
    methods: {
      toggleItems(){
        this.toggled = !this.toggled;
      },
      toggleItem: function() {
      this.toggled = !this.toggled;
    }
    }
  }
  //export default {}

</script>

Но когда я щелкаю один диапазон, появляется каждый палитр цветов, а не только выбранный. Как я могу это исправить? Я просто не могу найти способ

Answer 1

Когда вы переключаете toggled, который моделируется непосредственно для всех элементов вашего цикла. И когда toggled = true, вы видите элемент, отображаемый для всех циклов instructions в v-for. Потому что это условие, которое вы установили для отображения элементов, а не для какого-либо отдельного элемента

Я бы предложил вам немного изменить структуру массива institutions на

institutions:[
      {
        name: "UANL",
        color: "#6b5b95",
        toggled: false
      },
      {
        name: "CONALEP",
        color: "#feb236",
        toggled: false
      },
      {
        name: "ESCUELA",
        color: "#d64161",
        toggled: false
      }
    ],

И изменить вас html на

 <span class="current-color" :style="'background-color: ' + institution.color" @click="toggleItem(institution)"></span>

 <sketch-picker v-model="institution.color" v-show="institution.toggled" />

А теперь ваш метод должен выглядеть так:

toggleItems(institution){
    institution.toggled = !institution.toggled;
  },

Answer 2

когда вы переключаете элемент, отправьте его в вашу функцию:

  <span class="current-color" :style="'background-color: ' + institution.color" @click="toggleItem(institution)"></span>

, а затем установите значение вашего toggled свойства:

  toggleItem: function(item) {
    this.toggled = this.toggled != item ? item : null;
  }

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

<sketch-picker v-model="institution.color" v-show="toggled == institution" />