在Vue.js中的v-for列表项中显示和隐藏div

Question

在我的循环项上，我需要显示/隐藏所有div。当我单击打开一个div时（如果打开了任何其他div时），它们会自动隐藏。

我尝试过，对click方法进行函数调用，并传递索引号以捕获特定的div。

  

Skills.vue

<template>
  <div class="hello">
    <div class="holder">
      <ul>
        <transition-group
          name="list">
          <li v-for="(data, index) in skills" :key="index+1">
            {{index + 1}}. {{data.skillName}}
            <iclass="fa fa-plus-circle" v-on:click="openDiv(index)"></i>
            <div v-if="isHidden === index">Hide me on click event</div>
          </li>
        </transition-group>
      </ul>
    </div>
  </div>
</template>
<script>
import SkillService from "@/services/SkillService";
export default {
  name: "Skills",
  data() {
    return {
      skill: "",
      skills: [],
      isHidden: "abc"
    };
  },
  mounted() {
    this.getSkill();
  },
  methods: {
    async getSkill() {
      const response = await SkillService.fetchSkills();
      this.skills = response.data.skills;
    }
    openDiv(tableId) {
      this.isHidden = tableId;
      //alert(tableId);
    }
  }
};
</script>

但是我需要一个仅适用于该被单击的div的事件，并且显然不会被任何其他div的click事件修改。