Vue.js Vue JS中的切换类

我希望使用Vue JS切换一个类。我已经阅读了文档，但是我仍然在努力找出切换类的正确方法

为了简洁起见，我简化了代码，但本质上我有一个4个“计划”的列表，每个计划都有一个按钮，允许用户选择他们想要购买的计划。使用当前代码，将添加活动类，但当您单击另一个计划中的按钮时，该类将保留在当前非活动计划中

这是HTML

<div id="app">
<ul class="plans">
        <plan-component :
                        name="Basic"
        ></plan-component>

        <plan-component :
                        name="Recreational"
        ></plan-component>

        <plan-component :
                        name="Team"
        ></plan-component>

        <plan-component :
                        name="Club"
        ></plan-component>
      </ul>

      <template id="plan-component">
        <li v-bind:class="{ 'active-plan': isActive }">
          <h2 class="plan-name">{{ name }}</h2>
          <a href="#" v-on:click="makeActivePlan($event)" class="select-plan button">Choose this plan</a>
        </li>
      </template>
</div>

如果计划组件与其父级密切相关，则可以使用$parent属性获取/设置活动计划：

Vue.组件“计划-组件”{ 模板：“计划组件”， 道具：['name']， 计算：{ 活跃的{ 返回此值。$parent.activePlan.name===this.name } }, 方法：{ 制定活动计划{ this.$parent.activePlan.name=this.name } } } 新Vue{ el:“应用程序”， 数据：{ 活动计划：{name:'Club'} } } .active plan{颜色：红色} {{name}}

---

如果您想使用事件来保持灵活性和可重用性，另一种方法可以如下所示：

Vue.组件“计划-组件”{ 模板：'plan-component'， 道具：['name'，'isActive']， 方法：{ 制定活动计划{ this.$dispatch'set-active-plan'，this.name； } } }; 新Vue{ el:“应用程序”， 活动：{ “set-active-plan”名称{ 此文件名为.setActivePlanname } } 资料{ 返回{ 计划选项：[ {name:'Basic'，isActive:true}， {name:'娱乐'，isActive:false}， {name:'Team'，isActive:false}， {name:'Club'，isActive:false} ] } }, 方法：{ setActivePlanname{ this.planpoptions.forEachplan=>{ plan.isActive=false； ifplan.name==名称{ plan.isActive=true } }; } } };

Vue.component('plan-component', {
        template: '#plan-component',

      props: ['name', 'isActive'],

      methods: {
        makeActivePlan(e) {
            // We dispatch an event setting this to become the active plan
                e.preventDefault();
                this.isActive = true;
            this.$dispatch('set-active-plan', this);
        }
      }

    });

    new Vue({
      el: '#app',
      data: {
        activePlan: { name: 'n/a' }
      },

      events: {
        'set-active-plan': function(plan) {
            this.activePlan = plan;
        }
      },
    });