Vue JS - How to create a color switcher using buttons

Question

I have two buttons I want to do so that when the first button is pressed, its background changes (for example, red) and the background color of the second button becomes white and vice versa when the second button is pressed, the background color of the second button becomes red, and the color of the first button becomes white

<template>
  <div class="btn-group">
    <div>
      <button>First Click</button>
    </div>
    <div>
      <button>Second Click</button>
    </div>
  </div>
</template>

<script>
export default {
  isCheck: false,
};
</script>

<style scoped>
   .btn-group div button {
      background: white;
      color: red;
      padding: 10px;
   }
</style>

You can also see the given code in codesandbox

I edited my question, forgot to emphasize two more nuances, the initial background color of the buttons is white, besides, when you click on a specific button, the button text color should change, the original button color is red when you click on it, the text color should change to white

Patrick · Accepted Answer · 2021-05-07 06:59:12Z

You can use a state variable and apply css classes to your buttons accordingly, for example like this:

<template>
  <div class="btn-group">
    <div>
      <button
      :class="{ red: state === 1, white: state === 2 }"
      @click="setState(1)"
      >First Click</button>
    </div>
    <div>
      <button
      :class="{ red: state === 2, white: state === 1 }"
      @click="setState(2)"
      >Second Click</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  isCheck: false,
  props: {
    msg: String,
  },
  data() {
    return {
      state: 0
    }
  },
  methods: {
    setState(s) {
      this.state = s;
    }
  }
};
</script>

<style scoped>
.btn-group {
  display: flex;
  justify-content: center;
}
button {
  background: white;
  color: red;
  padding: 10px;
}
.red {
  background: red;
  color: white;
}
.white {
  background: white;
  color: red;
}
</style>

Collectives™ on Stack Overflow

Vue JS - How to create a color switcher using buttons

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related