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;
  }

最后你的show条件应检查当前循环项是否等于当前切换的项：

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

Answer 2

当您切换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;
  },

如何在v-if中处理单击的项目

2 个答案: