0
<div class="dateNav">
   <el-button-group>
      <el-button type="danger" plain> Days </el-button>      
      <el-button type="danger" plain> Lates </el-button>      
      <el-button type="danger" plain> Nights </el-button>   
   </el-button-group>   
</div>
<div class="dtFilter">
   <el-button-group>
      <el-button type="danger" plain> Unconfirmed </el-button>      
      <el-button type="danger" plain> Confirmed </el-button>      
      <el-button type="danger" plain> All </el-button>    
   </el-button-group>
</div>

Given the code above is there a way to have a button from each group have the active state at the same time?

I.e I'd like to have Days selected and Unconfirmed. if I selected lates then days will become inactive in favour of Lates but Unconfirmed will stay as active.

Jakob
  • 3,493
  • 4
  • 26
  • 42
Josh Gilbert
  • 89
  • 1
  • 9

1 Answers1

0

You can create array of objects for each button group. Then loop them in template to display buttons and on button click loop that button group and set active to true only for clicked button, also set other buttons in group to false.

It would look something like this:

<template>
  <div>
    <div class="dateNav">
      <el-button-group>
        <el-button
          v-for="(d, i) in dateNav"
          :key="i"
          :type="d.active ? 'success' : 'danger'"
          plain
          @click="setActive(d.name, 'dateNav')"
        >{{d.name}}</el-button>
      </el-button-group>
    </div>
    <br/>
    <div class="dtFilter">
      <el-button-group>
        <el-button
          v-for="(d, i) in dtFilter"
          :key="i"
          :type="d.active ? 'success' : 'danger'"
          plain
          @click="setActive(d.name, 'dtFilter')"
        >{{d.name}}</el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateNav: [
        {
          name: 'Days',
          active: true
        },
        {
          name: 'Lates',
          active: false
        },
        {
          name: 'Nights',
          active: false
        }
      ],
      dtFilter: [
        {
          name: 'Unconfirmed',
          active: true
        },
        {
          name: 'Confirmed',
          active: false
        },
        {
          name: 'All',
          active: false
        }
      ]
    };
  },
  methods: {
    setActive(name, group) {
      this[group].forEach(d => {
        (name === d.name) ? d.active = true : d.active = false
      })
    }
  }
};
</script>

Full preview here

Jakob
  • 3,493
  • 4
  • 26
  • 42