Implement a feature in Vue.js where clicking a button changes the background color

Question

Implement a feature in Vue.js where clicking a button changes the background color

I'm working on an app using VUE JS and incorporating various components.

Within one of the components, I have a button that I want to change color when clicked. This button is responsible for selecting different items from a table, so I'd like it to change its background color to red, for example, whenever it's clicked in order to track selections.

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

This code snippet shows the button in question. What would be the best way to incorporate styling changes upon clicking the button?

Your help is much appreciated!

javascript vue.js button vue-component background-color

Answer 1

Answer №1

One way to dynamically add a class to an element is through conditional binding.

Check out more about this in the following link: 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>

Answer 2

One way to dynamically add a class to an element is through conditional binding.

Check out more about this in the following link: 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>

Answer 3

Answer №2

Utilize the css classes by choosing one of these options

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

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

Answer 4

Utilize the css classes by choosing one of these options

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

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

Answer 5

Answer №3

Here's a unique way to connect JavaScript variables to Vue.js using the watch method. This setup allows for immediate updates as you move the cursor on a color picker. Take a look at the snippet below which also requires CSS styling.

let vue = new Vue({
  el: "#view",
  data: {
    bg: "#FFFFFF",
    color: "#000000",
  },
  watch: {
    bg: css_variable_watcher("--bg"),
    color: css_variable_watcher("--color"),
  },
});
//CSS Watcher
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>

Answer 6

Here's a unique way to connect JavaScript variables to Vue.js using the watch method. This setup allows for immediate updates as you move the cursor on a color picker. Take a look at the snippet below which also requires CSS styling.

let vue = new Vue({
  el: "#view",
  data: {
    bg: "#FFFFFF",
    color: "#000000",
  },
  watch: {
    bg: css_variable_watcher("--bg"),
    color: css_variable_watcher("--color"),
  },
});
//CSS Watcher
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>

Implement a feature in Vue.js where clicking a button changes the background color

Answer №1

Answer №2

Answer №3

Similar questions

How can one create custom JavaScript UI controls for a UWP application?

What is the best way to retrieve data in Nodejs from a different execution context?

Transforming jquery code into Angularjs code

Div automatically shifts to center position when other div elements vanish from view

Executing JavaScript code within a Django application to load a file

Using ASP.NET MVC to map FormData with an array to a model class

Using a combination of radio buttons and JavaScript to adjust the color of a div element

Programming with a combination of Javascript, Angular, and Prototype to efficiently manage and

What potential side-effects could occur from cloning the entire state object in React?

The issue of "undefined is not a function" is arising when trying to use the session in NHibernate with a mongo store

Loop through, conditionally display, and perform comparisons on different components of a date object

Modifying script variables using the Chrome console

As my character slides off the moving platform in this exciting Javascript canvas game, my heart

Error message stating that there is no property 'collection' in Firestore when using Firebase v9 modular syntax in Firebase Firestore

The application of Uglify to eliminate console logs can be inconsistent in its effectiveness

Utilize Jquery to copy the parent element to the text field with just a click

Obtaining the scene's coordinates in Three.js

What is the best method to adjust the size of a three.js renderer to match a specific webpage element?

What is the most effective method for discerning the availability of fresh data?

Executing an HTML webpage with npm package.json file