Переменная в данных продолжает возвращаться к истине - PullRequest
Новая
       16

Переменная в данных продолжает возвращаться к истине

0 голосов
/ 29 мая 2019

Я, вероятно, сделал это тысячу раз сейчас. Простая процедура, при которой, если я нажимаю на элемент, я получаю доступ к методу и изменяю переменную в data (). Только теперь, когда я это делаю, переменная продолжает переключаться. Первоначально для переменной задано значение false, при нажатии на нее появляется элемент, который переключает значение true. Есть еще один элемент, который при нажатии устанавливает переменную в false. Только всякий раз, когда эта переменная снова устанавливается в значение false, она снова переключается в значение true. Я проверил инспектор и заметил, что всякий раз, когда переменная возвращается в значение false, она автоматически возвращается к значению true.

Я создал новый компонент, удалил все, что не имеет отношения к переключению, и это поведение все еще сохраняется. Иногда, когда я продолжаю нажимать на элемент, он остается ложным, но требуемое количество кликов кажется случайным. Может ли это быть ошибкой?

Это компонент 

<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>
...