Question

我正在使用VUE，我有一个称为Quotation的组件，在内部我称为另一个名为sideBarOptions的组件（子组件），这是一个显示在父组件上方并带有隐藏选项的侧边栏

从sideBarOptions 我有一个称为条件的属性，其设置如下： conditions = false ，我想通过简单的 @click 将其更改为true strong>，但直到我关闭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>

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

1 个答案: