Vue JS - How to change the background of a button when clicking on it using an object

Question

I have three buttons, I want to do this when you click on it, the background changed, for example, when you click on the red button, the background color changed to red, but here there is one important nuance if you click, for example, on the red button, and then another button, then the old color should disappear

For example, I clicked on the orange button, the background of the button turned orange, and then I clicked on the green button, then the orange background should disappear, You can also look at the code in codesandbox

<template>
  <div>
    <div v-for="(btn, index) in buttonCheckAge" :key="index" class="select-age">
      <div>
        <p>{{ btn.btnName }}</p>
      </div>
      <div>
        <button :class="btn.className">{{ btn.btnText }}</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttonCheckAge: [
        {
          btnName: "Blue",
          btnText: "btn-Blue",
          className: "btn-teens",
          state: 0,
        },
        {
          btnName: "Red",
          btnText: "btn-Red",
          className: "btn-minxes",
          state: 1,
        },
        {
          btnName: "Green",
          btnText: "btn-Green",
          className: "btn-milfs",
          state: 2,
        },
      ],
    };
  },
};
</script>

where's the @click event?

bel3atar
– bel3atar

2021-05-09 21:06:19 +00:00
Commented May 9, 2021 at 21:06 — bel3atar
– bel3atar, Commented May 9, 2021 at 21:06

tony19 · Accepted Answer · 2022-07-16 02:12:50Z

1

You could use the index to track the selected button, apply a class based on the index, and style the button using the class:

Declare a data variable to track the selected index (named selectedIndex).

export default {
  data() {
    return {
      selectedIndex: -1,
    }
  }
}

Use a class binding to conditionally add the selected class on the button.

<button :class="[btn.className, { selected: selectedIndex === index }]"

Add a click-handler that sets selectedIndex to the index of the button.
```
<button @click="selectedIndex = index">
```

Add a style for the buttons that combines .selected with the corresponding btn.classNames:

<style scoped>
.selected.btn-teens {
  background: #00f;
}
.selected.btn-minxes {
  background: #f00;
}
.selected.btn-milfs {
  background: #0f0;
}
</style>

demo

edited Jul 16, 2022 at 2:12

answered May 10, 2021 at 3:05

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Samuel Belo · Accepted Answer · 2021-05-10 01:42:56Z

I have made some this.$parent call but you can simply use provide/injection for this. Check the code in sandbox

First, I made a backgroundChooser() method, that get the className of the pressed button, and bind a class name ("background-blue", or whatever) to a data() variable. This method exists in the App.vue component, and is called by an other method chooser(), in the HelloWorld.vue component.

Certainly there has other better ways to do this. Let us know if you find it.

App.vue

<template>
  <div id="app" :class="color">
    <img alt="Vue logo" src="./assets/logo.png" width="25%" />
    <HelloWorld msg="Hello Vue in CodeSandbox!" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      color: "",
    };
  },
  methods: {
    backgroundChooser(e) {
      if (e !== undefined) {
        if (e.currentTarget.className === "btn-teens") {
          this.color = "background-blue";
        } else if (e.currentTarget.className === "btn-minxes") {
          this.color = "background-red";
        } else if (e.currentTarget.className === "btn-milfs") {
          this.color = "background-green";
        }
      } else {
        this.color = "";
      }
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.background-red {
  background-color: red;
}
.background-blue {
  background-color: blue;
}
.background-green {
  background-color: green;
}
</style>

HelloWorld.vue

<template>
  <div>
    <div v-for="(btn, index) in buttonCheckAge" :key="index" class="select-age">
      <div>
        <p>{{ btn.btnName }}</p>
      </div>
      <div>
        <button @click="chooser" :class="btn.className">
          {{ btn.btnText }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    chooser(e) {
      this.$parent.backgroundChooser(e);
    },
  },
  data() {
    return {
      buttonCheckAge: [
        {
          btnName: "Blue",
          btnText: "btn-Blue",
          className: "btn-teens",
          state: 0,
        },
        {
          btnName: "Red",
          btnText: "btn-Red",
          className: "btn-minxes",
          state: 1,
        },
        {
          btnName: "Green",
          btnText: "btn-Green",
          className: "btn-milfs",
          state: 2,
        },
      ],
    };
  },
};
</script>

Your code works, but I need to change the color of the button and not the block

Collectives™ on Stack Overflow

Vue JS - How to change the background of a button when clicking on it using an object

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related