单击 VUE 在子组件上无法正常工作答案

【问题标题】：Click on VUE does not work correctly on component child单击 VUE 在子组件上无法正常工作
【发布时间】：2019-10-23 12:53:51
【问题描述】：

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

从 sideBarOptions 我有一个名为 conditions 的属性设置如下：conditions = false，我想通过简单的 @click 将其更改为 true strong> 但在我关闭 sideBarOptions 并且此时触发 @click 之前它不会立即起作用。

这是我的代码：

报价.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);
    },
  }
}

在我关闭子组件之前，我不明白它改变的原因。你能帮助我吗？谢谢。

【问题讨论】：

关闭子组件是什么意思？你怎么关闭它？
这是一个边栏，我通过将变量设置为 false 来关闭它
请在你的父母Quotation.vue显示更多你的代码你如何关闭sideBarOptions.vue
@skribe 谢谢，我已经把代码放在我展示如何关闭它的地方

标签： javascript vue.js vuejs2

【解决方案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>

【讨论】：