Question

我正在寻找使用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;
        }
      },
    });

Answer 1

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

＆＃13;

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' }
  }
})

＆＃13;

.active-plan { color: red }

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

然后html将是：

＆＃13;

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

＆＃13;

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

在Vue JS

2 个答案: