在 Vue JS 中切换类答案

【问题标题】：Toggle class in Vue JS在 Vue JS 中切换类
【发布时间】：2016-10-31 22:24:42
【问题描述】：

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

为了简洁起见，我简化了我的代码，但基本上我有一个包含 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>

这里是 JS。

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

【问题讨论】：

标签： vue.js

【解决方案1】：

如果plan-component 与其父级密切相关，您可以使用$parent 属性来获取/设置活动计划：

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

  props: ['name'],

  computed: {
    isActive () {
    	return this.$parent.activePlan.name === this.name
    }
  },
  
  methods: {
    makeActivePlan () {
      this.$parent.activePlan.name = this.name
    }
  }
})

new Vue({
  el: '#app',
  
  data: {
    activePlan: { name: 'Club' }
  }
})

.active-plan { color: red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script>

<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 :class="{ 'active-plan': isActive }" @click.prevent="makeActivePlan">
      <h2 class="plan-name">{{ name }}</h2>
    </li>
  </template>
</div>

【讨论】：

【解决方案2】：

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

Vue.component('plan-component', {
    template:'#plan-component',
    props:['name', 'isActive'],
    methods:{
	makeActivePlan(){
	    this.$dispatch('set-active-plan', this.name);
	}
    }
});

new Vue({
	el:'#app',
	events:{
           'set-active-plan'(name){
		this.setActivePlan(name)
	    }
	}
	data(){
	    return{
		planOptions:[
		    {name:'Basic', isActive:true},
		    {name:'Recreational', isActive:false},
		    {name:'Team', isActive:false},
		    {name:'Club', isActive:false}
		]
	    }
	},
	methods:{
	    setActivePlan(name){
	        this.planOptions.forEach(plan => {
		    plan.isActive = false;
		    if(plan.name === name){
		        plan.isActive = true
		    }
	         });
	     }
	}
});

那么 html 将是：

<div id='app'>
    <ul class="plans">
	<plan-component 
	    v-for="plan in planOptions"
	    :name="plan.name"
	    :isActive="plan.isActive"
	></plan-component>
    </ul>
	
	<template id="plan-component">
        <li :class="{ isActive: 'active-plan' }" @click.prevent="makeActivePlan">
          <h2 class="plan-name">{{ name }}</h2>
        </li>
      </template>
</div>

我尚未测试代码，但它应该可以按预期工作。如果您遇到任何困难，请在此处发表评论，我会尽力提供帮助。

【讨论】：