Нажатие на VUE не работает правильно на дочернем компоненте

Question

Я работаю с VUE, и у меня есть компонент с именем Quotation, и внутри я вызываю другой компонент (дочерний компонент) с именем sideBarOptions, который является боковой панелью, которая показана над родительским компонентом с возможностью ее скрытия

Из sideBarOptions У меня есть свойство под названием условие , установленное следующим образом: условие = ложь , и я хочу изменить его на true с помощью простого @ click , но оно имеет значениене работает сразу, пока я не закрою sideBarOptions и в этот момент сработает @ click .

Это мой код:

Quotation.vue

<template>
 <sideBarOptions :showSidebar=show @closeSideBar="closeSideBar"/>
</template>

export default {
 data() {
  return {
    show: false,
  }
 },
 methods: {
    closeSideBar(value) {
      this.show = value;
    },  
 }
}

sideBarOptions.vue

<template>
 <div @click="conditions = !conditions">
  <input type="checkbox" id="box-1">
  <label for="box-1">Aceptar</label>
 </div>

 <div class="sideBar">
  <a href="#" class="closeBtn-send-email" @click="closeSideBar()">
    <h2>Envíar Cotización</h2>
    <span>X</span>
  </a>
 </div>
</template>

export default {
 props: {
    showSidebar: Boolean
 },
 data() {
  return {
    conditions: false,
  }
 },
 methods: {
    closeSideBar() {
      this.$emit('closeSideBar', false);
    },
  }
}

Я не понимаю причину, по которой он меняется, пока я не закрою дочерний компонент.Вы можете мне помочь?Спасибо.

Answer 1

Попробуйте поставить модель на флажок:

<div>
  <input type="checkbox" id="box-1" v-model="conditions">
  <label for="box-1">Aceptar</label>
</div>

---

также могут быть проблемы с несколькими элементами в одном компоненте, поэтому оберните его в div, предполагая, что это всего лишь ваш пример.

<template>
  <div>
    <div @click="conditions = !conditions">
      <input type="checkbox" id="box-1">
      <label for="box-1">Aceptar</label>
    </div>

    <div class="sideBar">
      <a href="#" class="closeBtn-send-email" @click="closeSideBar()">
        <h2>Envíar Cotización</h2>
        <span>X</span>
      </a>
    </div>
  </div>
</template>