Mastering the art of manipulating the Document Object Model in Vue.js

Question

Mastering the art of manipulating the Document Object Model in Vue.js

I have a situation where I am using v-for to display a lot of data in JSON as individual buttons. My goal is to change the background color of the button when it is clicked. I plan to use @click to bind a function to each button, and within that function, perform the following action:

theButtonDOM.style.backgroundColor = 'black';

How can I access the DOM element of the button generated by v-for? Alternatively, are there any other solutions to solve this issue of changing the background color?

javascript css vue.js

Answer 1

Answer №1

Whenever a click event is triggered in a Vue template, you have the ability to access the event by including the special variable $event as an argument in the function.

<button @click="my_method($event, other_argument)"></button>

You can then retrieve the target of the event within the method:

methods: {
    my_method(event, other_parameters) {
        let button = event.target
}
}

Even if you simply bind the method to the @click event without any arguments, you can still access the event as your first parameter.

<button @click="my_method"></button>
...
methods: {
    my_method($event) {
        let button = $event.target
}
}

You are now able to interact with your button accordingly.

For additional information, refer to this stackoverflow question and the Vue documentation.

Answer 2

Whenever a click event is triggered in a Vue template, you have the ability to access the event by including the special variable $event as an argument in the function.

<button @click="my_method($event, other_argument)"></button>

You can then retrieve the target of the event within the method:

methods: {
    my_method(event, other_parameters) {
        let button = event.target
}
}

Even if you simply bind the method to the @click event without any arguments, you can still access the event as your first parameter.

<button @click="my_method"></button>
...
methods: {
    my_method($event) {
        let button = $event.target
}
}

You are now able to interact with your button accordingly.

For additional information, refer to this stackoverflow question and the Vue documentation.

Answer 3

Answer №2

To utilize the $event variable, follow these steps:

<button @click="changeColor($event)"></button>

In your method implementation:

this.changeColor = function(evt){ evt.target.style.backgroundColor = 'red'; }

Answer 4

To utilize the $event variable, follow these steps:

<button @click="changeColor($event)"></button>

In your method implementation:

this.changeColor = function(evt){ evt.target.style.backgroundColor = 'red'; }

Answer 5

Answer №3

If you want to change the class of an item when it is clicked, you can utilize @click and v-bind:class. By using these directives, you can store the index of the clicked item in a variable called selectedItem, which will then automatically apply a specific class to the item with the corresponding index.

new Vue({
  el: '#app',
  data: {
    selectedItem: ""
  },
  computed:{},
  methods: {}
  }
)

.selectedItemClass {
  background-color:green
}

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

  <div v-for="(item,index) in ['aa','bb','cc']"
    v-bind:class="{  selectedItemClass : (selectedItem === index) }"
    @click="selectedItem = index"
  >{{item}}</div>
  
</div>

Answer 6

If you want to change the class of an item when it is clicked, you can utilize @click and v-bind:class. By using these directives, you can store the index of the clicked item in a variable called selectedItem, which will then automatically apply a specific class to the item with the corresponding index.

new Vue({
  el: '#app',
  data: {
    selectedItem: ""
  },
  computed:{},
  methods: {}
  }
)

.selectedItemClass {
  background-color:green
}

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

  <div v-for="(item,index) in ['aa','bb','cc']"
    v-bind:class="{  selectedItemClass : (selectedItem === index) }"
    @click="selectedItem = index"
  >{{item}}</div>
  
</div>

Answer 7

Answer №4

It seems like you are looking to have the buttons function as independent switches rather than a radio group, similar to what was suggested by @eag845 in another response.

An approach could be to introduce a 'clicked' boolean property to your JSON Objects.

arrayOfJSONObjects.forEach(object => object.clicked = false); // Create and set 'clicked' attribute to false

You can then utilize this property as a condition to apply a CSS class using v-bind:class or :class. Additionally, you can toggle this property within the @click event handler or any other relevant function you define within @click.

<button
    v-for="btn in arrayOfJSONObjects"
    :class="{ 'button--activated': btn.clicked }"
    @click="btn.clicked = !btn.clicked"
>{{btn.foo}}</button>

CSS Styling:

.button {
  background-color: white;
}
.button--activated {
  background-color: black;
}

Answer 8

It seems like you are looking to have the buttons function as independent switches rather than a radio group, similar to what was suggested by @eag845 in another response.

An approach could be to introduce a 'clicked' boolean property to your JSON Objects.

arrayOfJSONObjects.forEach(object => object.clicked = false); // Create and set 'clicked' attribute to false

You can then utilize this property as a condition to apply a CSS class using v-bind:class or :class. Additionally, you can toggle this property within the @click event handler or any other relevant function you define within @click.

<button
    v-for="btn in arrayOfJSONObjects"
    :class="{ 'button--activated': btn.clicked }"
    @click="btn.clicked = !btn.clicked"
>{{btn.foo}}</button>

CSS Styling:

.button {
  background-color: white;
}
.button--activated {
  background-color: black;
}

Mastering the art of manipulating the Document Object Model in Vue.js

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Initializing an HTML5 video player directly from an Array

What exactly is the task of the Angular compiler?

Having trouble with loading textures in Three.js?

What is the best way to line up three divs horizontally and center the contents inside each one?

Fixing the issue: "Tricky situation with JavaScript not working within Bootstrap 4's div tag while JS functions properly elsewhere"

Exporting Datatable to Excel may cause line breaks

React Material UI issue: You cannot render objects as a React child. If you intended to display a group of children, make sure to use an array instead

When working with DNN, I attempted to redirect using JavaScript code, but found that I continue to see the same page after the form submission code

Is there a more effective method to return a response apart from using a redundant function?

The modification of Javascript content type occurring following URL Rewrite

Select the top row of a table when the checkbox is ticked to emphasize it

The issue arises when RadioBoxes do not submit properly after their `check` status is altered using JQuery

Attempting to update state on a component that is no longer mounted

The variable in Vue.js is failing to update, resulting in a "variable is not defined" error

Utilizing map in React JS to simultaneously execute various functions

Pattern for Ajax callback in Javascript

Guide on efficiently inserting values into an array of objects

Limiting character count in jQuery using JSON

What is the best way to invoke a function using a string as its name?

Interacting with HTML elements in Java programming