javascript - 如何处理 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

当您切换项目时，将其发送到您的函数:

  <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" />