Javascript 如何允许@onclick在vueJs中处理多个事件并使组件停留在v-if上？

我已经有一段时间被这个问题困扰了。我试图在每次单击时使用相同的按钮显示一些组件。我试图通过创建一个计数器来解决这个问题，这样我就可以跟踪我要在单击时显示的组件的数字和v-if=“this.count==3”。但是，我希望其中一个组件保持并显示，而不是在v-if出现故障时消失。有没有什么方法可以让组件在第一次初始化后粘住？ 样本代码如下所示

要显示的组件（请忽略数据部分。尝试将内联样式显示更改为内联块，但也失败

<template>
  <div class="thought-box" v-if="this.count == 3">
    <h5>{{msg}}</h5>
    <div class="rating">
      <p>Rate this thought:</p>
      <b-dropdown text="Please select">
        <b-dropdown-item>Very Important</b-dropdown-item>
        <b-dropdown-item>Quite Important</b-dropdown-item>
        <b-dropdown-item>Litte Important</b-dropdown-item>
        <b-dropdown-item>Not Important</b-dropdown-item>
      </b-dropdown>
      <a href="#">OK</a>
    </div>
  </div>

</template>

<script>
export default {
  Name: 'ThoughtBox',
  props: ['msg', 'count'],
  data(){
    return{
      activeDisplay: 'none',
      num: this.count
    }
  },
  watch: {
    num(){
      alert('this thing is working');
      this.activeDisplay = 'inlineBlock';
    }
  }
}
</script>

{{msg}}
评价这一想法：

非常重要
相当重要
不太重要
不重要
导出默认值{
名称：'ThoughtBox'，
道具：['msg'，'count']，
数据（）{
返回{
activeDisplay:“无”，
num：这个。count
}
},
观察：{
num（）{
警惕（“这东西在工作”）；
this.activeDisplay='inlineBlock'；
}
}
}

基本组件

<template>
 <div class="base">
   <img src="../assets/jai-normal2.png" alt="jai_normal">
   <Convo :count="num" @handleIncrement="num++"/>
   <img src="../assets/uma-normal2.png" alt="uma_normal">
   <ThoughtBoxContainer :count="num"/>
 </div>
</template>

<script>
import Convo from '../components/Convo.vue'
import ThoughtBoxContainer from '../components/ThoughtBoxContainer.vue'
export default {
  name: 'Base',
  components: {
    Convo, ThoughtBoxContainer
  },
  data(){
    return {
      num: 0
    };
  }
}
</script>

从“../components/conva.vue”导入conva
从“../components/ThoughtBoxContainer.vue”导入ThoughtBoxContainer
导出默认值{
名称：'Base'，
组成部分：{
Conva，ThoughtBoxContainer
},
数据（）{
返回{
数字：0
};
}
}

使用不同的道具重用组件

<template>
<div class="thought-box-container">
  <ThoughtBox msg="Mamak and teh tarik are quick food." :count="this.count"/>
  <ThoughtBox msg="I'm still a kinda-fit footballer" :count="this.count"/>
  <ThoughtBox msg="Dr. Michelle thinks I have pre-hypertension"/>
  <ThoughtBox msg="I'm not sure when I have time to take care of myself"/>
  <ThoughtBox msg="Gaining weight is natural with age"/>
  <ThoughtBox msg="I don't want my wife to worry about my health"/>
  <ThoughtBox msg="It's hard to change old habits"/>
  <ThoughtBox msg="I'm embarassed to demonstrate football drills."/>
  <ThoughtBox msg="My wife thinks I'm sexy when I'm fit."/>
  <ThoughtBox msg="I have to work long hours for my family's future."/>
  <ThoughtBox msg="I want to be in good shape to teach my kids."/>
  <ThoughtBox msg="I can learn skills to keep me motivated to change"/>
</div>
</template>

<script>
import ThoughtBox from "../components/ThoughtBox.vue"
export default {
  Name: 'ThoughtBoxContainer',
  components: {
    ThoughtBox
  },
  props: ["count","msg"]
}
</script>

从“./components/ThoughtBox.vue”导入ThoughtBox
导出默认值{
名称：“ThoughtBoxContainer”，
组成部分：{
思想箱
},
道具：[“计数”，“消息”]
}

代码有点凌乱，因为我是个新手。如果你有任何重构代码的建议，我会洗耳恭听并学习。

---

谢谢！

因此，您希望v-if为真，而不仅仅是针对

this.count==3

？类似于

v-if=“this.count==3 | | someOtherCondition”

？是否

this.count>=3

帮助？@sthotakura yea这对一个组件有效。但是如果我决定再次使用同一个组件并使用不同的道具，我是否可以控制它。谢谢。如果你在多个地方使用该组件，那么他们是否会有自己的道具副本？或者道具是否共享给其他人通过父组件渲染组件？我正在尝试使用新道具多次渲染同一组件，我想知道v-if是否有助于在每次单击和停留时渲染每个组件。我在前面编辑了我的问题，其中包含多次使用的组件的代码，以查看它是否有任何帮助。非常感谢您的帮助，谢谢。因此，您希望v-if为真，而不仅仅是针对

this.count==3

？类似于

v-if=“this.count==3 | | someOtherCondition”

？是否

this.count>=3

帮助？@sthotakura yea这对一个组件有效。但是如果我决定再次使用同一个组件并使用不同的道具，我是否可以控制它。谢谢。如果你在多个地方使用该组件，那么他们是否会有自己的道具副本？或者道具是否共享给其他人通过父组件渲染组件？我正在尝试使用新道具多次渲染同一组件，我想知道v-if是否有助于在每次单击和停留时渲染每个组件。我在前面编辑了我的问题，其中包含多次使用的组件的代码，以查看它是否有任何帮助。非常感谢您的帮助谢谢