javascript - 单击 VUE 在子组件上无法正常工作

Question

我正在使用 VUE，我有一个名为 Quotation 的组件，在内部我调用另一个名为 sideBarOptions 的组件(子组件)，它是一个显示在父组件上方的侧边栏，可以选择隐藏它

从 sideBarOptions 我有一个名为条件的属性，设置如下:conditions = false，我想通过简单的@click将其更改为 true但它不会立即起作用，直到我关闭 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>