Add background color when click a button vue js

Question

I'm building an app with VUE JS, using different components.

In one of them, I have a button that I would like that change the color when I click on it. This button is choosing different items from a table, so when I press that button I want that the background of that button change to red for example to know which ones I have clicked.

<template>
  <button class="mdc-icon-button material-icons"  @click="doMultiple">delete_outline</button>  
</template>

This is the button. How can I add there the style when button be clicked?

Thanks in advance!

Please go through Vue class and style bindings. vuejs.org/v2/guide/class-and-style.html — Pranav Kale
– Pranav Kale, Commented Dec 16, 2019 at 10:32
You can do this by adding a class conditionally on click of that button. <button class="mdc-icon-button material-icons" :class="{ bg-red: clicked }">clickme</button> clicked value will be initially false and set it to true on click. — Ramki
– Ramki, Commented Dec 16, 2019 at 10:34
@Ramki Thanks, but I have tried what you said and it returns me an error on :class because it says that it require an attribute value. — Multi
– Multi, Commented Dec 16, 2019 at 10:58

tony19 · Accepted Answer · 2022-07-15 01:02:32Z

2

You can use conditional binding to dynamically add a class to an element.

https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: "#app",
  data: {
    deleteClicked: false
  },
  methods: {
    onClick() {
      this.deleteClicked = true;
    }
  }
})

.red {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div :class="{ red : deleteClicked }">
    Item
    <button @click="onClick">
      Delete
    </button>
  </div>
</div>

edited Jul 15, 2022 at 1:02

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 16, 2019 at 10:46

Pierre Said

3,8901 gold badge22 silver badges34 bronze badges

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

3 Comments

Multi Over a year ago

Thanks, not exactly what I was looking for but that can help me. Thanks Pierre!!

rjurney Over a year ago

And what about the original class? How do you preserve it in the element?

Pierre Said Over a year ago

@rjurney You can have both static classes and dynamic classes <div class="static" :class="{ dynamic : true }"> vuejs.org/v2/guide/class-and-style.html#Object-Syntax

Sarah Sundar · Accepted Answer · 2019-12-16 11:00:51Z

1

Call the css class with either of the option

.mdc-icon-button material-icons:active{
    background:red;
}
OR

.mdc-icon-button material-icons:focus{
    background:red;
}

answered Dec 16, 2019 at 11:00

Sarah Sundar

382 bronze badges

Comments

Visal · Accepted Answer · 2019-12-31 19:29:32Z

This is my version of linking js variables to vue js with watch method. This is immediate and will change as you drag the cursor along the color picker. Check the code snippet below. CSS is also required.

let vue = new Vue({
  el: "#view",
  data: {
    bg: "#FFFFFF",
    color: "#000000",
  },
  watch: {
    bg: css_variable_watcher("--bg"),
    color: css_variable_watcher("--color"),
  },
});
//Watcher for CSS
function css_variable_watcher(name, suffix = "") {
  return {
    immediate: true,
    handler(new_value, old_value) {
      document.documentElement.style.setProperty(name, new_value + suffix);
    },
  };
}

body {
  background-color: var(--bg);
  color: var(--color);
}

<body>
  <div id="view">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <input type="color" v-model="bg">
    <input type="color" v-model="color">
    <button type="button" v-on:click="[color, bg] = [bg, color]">Swap Text and Background Color</button>
    <p>Hello. I am a Paragraph. Select the first input to change bg color and second input to change text color.</p>
  </div>
</body>

Collectives™ on Stack Overflow

Add background color when click a button vue js

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related