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

Question

我已经坚持了一段时间。我尝试使用相同的按钮在每次单击时显示一些组件。我试图通过创建一个计数器来解决这个问题，以便我可以跟踪我想要在单击时显示的组件的数字和 v-if="this.count == 3"。但是，我希望其中一个组件保持并显示，并且在 v-if 变得虚假时不会消失。有什么方法可以让组件在第一次初始化后粘住？示例代码如下；

要显示的组件（请忽略数据部分。尝试将内联样式显示更改为 inline-block 并且也不成功。

<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>

基础组件

<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>

使用不同的道具重用组件

<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>

代码有点乱，因为我是新手。如果您有任何重构代码的建议，我会全力倾听和学习。谢谢！

标签： javascriptvue.js