数据中的变量不断恢复为真

Question

我大概已经做了一千遍了。简单的过程，如果单击某个元素，便可以访问方法并更改data（）中的变量。直到现在，只要执行此操作，变量就会一直切换。该变量最初设置为false，如果单击该变量会将其切换为true，则存在一个元素。还有另一个元素，当单击该元素时会将变量设置为false。仅当该变量再次设置为false时，它才会继续切换回true。我检查了检查器，发现只要将变量设置为false，它就会自动恢复为true。

我创建了一个新组件，删除了与切换无关的所有内容，并且该行为仍然存在。有时，当我继续单击该元素时，它将保持false，但所需的点击次数似乎是随机的。这可能是错误吗？

这是组件

<template>
  <div class="w-full text-black">
    <div
      v-if="editing"
      class="flex justify-between items-center"
    >
      <div class="block flex justify-center items-center h-4">
        <div class="icon-teal cursor-pointer w-6 mr-4">
          <img
            src="/svgs/check.svg"
            alt
            @click="save($event)"
          >
        </div>

        <div
          class="block relative cursor-pointer w-4 h-4"
          v-on:click="deactivate($event)"
        >
          <img
            class="icon-red colorize-teal "
            src="/svgs/close.svg"
            alt
          >
        </div>
      </div>
    </div>

    <div
      v-else
      class="flex justify-between items-center"
    >
      <p class="w-3/5 px-4 py-3 h-12">text</p>

      <div
        class="block cursor-pointer icon-grey colorize-teal w-5"
        @click="activateField($event)"
      >
        <img
          class
          src="/svgs/pen.svg"
          alt
        >
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data () {
    return {
      editing: false,
    }
  },
  methods: {
    activateField (event) {
      this.editing = true;
    },

    deactivate (event) {
      this.editing = false;
    },
  },
};
</script>