Question

我有一个Vue组件，它显示一个投票按钮。当用户点击投票按钮时，会添加.active类。现在我需要确保在任何给定时间只有一个投票按钮可以拥有此.active类。

我需要在代码中更改内容：

Vue.component('moustache', {
    name: 'moustache',
    props: ['type', 'img'],
    template: `<li>
                 <p><strong>@{{ type }}</strong></p>
                 <img width="300" height="200" :src="img">
                 <button class="btn btn-primary" v-bind:class="{ active: isActive }" :data-type="type" @click="toggleClass">
                   Vote
                 </button>
              </li>`,
    data: function(){
        return{
            isActive: false
        }
    },
    methods: {
        toggleClass(){
                this.isActive = !this.isActive;
        }
    }
});

new Vue({
    el: '#app'
});

Answer 1

每个胡须组件应仅控制其自身状态。在您描述的情况下，最好让父组件在单击时更新所有按钮。

一般来说：

在胡子组件中单击按钮
Mustache组件发出“已激活”事件
父组件侦听“已激活”事件，并更新所有按钮的状态

以下是代码中的示例：

Vue.component('moustache', {
  name: 'moustache',
  props: ['type', 'img', 'isActive'],
  template: `<li>
                 <p><strong>@{{ type }}</strong></p>
                 <img width="300" height="20" :src="img">
                 <button class="btn btn-primary" v-bind:class="{ active: isActive }" :data-type="type" @click="toggleClass">
                   Vote
                 </button>
              </li>`,
  methods: {
    toggleClass() {
      this.$emit('activate')
    }
  }
});

new Vue({
  el: '#app',
  data: {
    buttons: [{
      isActive: false,
      type: 'Button 1',
      img: null
    }, {
      isActive: false,
      type: 'Button 2',
      img: null
    }, {
      isActive: false,
      type: 'Button 3',
      img: null
    }, ]
  },
  methods: {
    activateButton: function(activatedButton) {
      for (let button of this.buttons) {
        button.isActive = button === activatedButton
      }
    }
  }
});

.active { background-color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>

<div id="app">
  <moustache v-for="button in buttons" 
             :is-active="button.isActive"
             :type="button.type"
             :src="button.src"
             v-on:activate="activateButton(button)"></moustache>
</div>

当然，只有当所有投票按钮都可以由同一个父组件控制时，此方法才有效。如果您需要更复杂的行为，那么可能值得研究Vuex。然后，按钮的状态可以由vuex商店管理。

Vue - 通过多个按钮切换课程

1 个答案: