Utilize Vue to localize the click events of buttons on the webpage

Question

Utilize Vue to localize the click events of buttons on the webpage

I have a scenario where I have several buttons on a page, and when I click one to toggle its text, all of the buttons change. How can I utilize VUE to isolate functionality and make each button's @click event only affect the clicked button? In the code snippet below, you can see that every button changes when clicked, whereas I want only the text of the clicked button to change.

Here is an example from another post, full credit goes to:

change button while pressing it with vue.js

new Vue({
  el: '#app',
  data: {
    isFavorite: false
  },
  methods: {
    toggleFavorite() {
      this.isFavorite = !this.isFavorite;
    }
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <button @click="toggleFavorite" v-show="!isFavorite">Add to favorites</button>
  <button @click="toggleFavorite" v-show="isFavorite">Delete from favorites</button>
 <button @click="toggleFavorite" v-show="!isFavorite">Add to favorites</button>
  <button @click="toggleFavorite" v-show="isFavorite">Delete from favorites</button>
</div>

javascript vue.js

Answer 1

Answer №1

Consider using a dictionary structure instead of a singular variable:

data() {
  return {
    favorites: {}
  }
},

Rather than toggling a boolean value, toggle a property within the object:

<button @click="toggleFavorite('itemA')" v-show="!favorites['itemA']">Add to Favorites</button>
<button @click="toggleFavorite('itemA')" v-show="favorites['itemA']">Remove from Favorites</button>

The toggle method:

methods: {
  toggleFavorite(item) {
    this.$set(this.favorites, item, !this.favorites[item]);
  }
}

Check out this demonstration if you need further clarification:

new Vue({
  el: '#app',
  data() {
    return {
      favorites: {}
    }
  },
  methods: {
    toggleFavorite(item) {
      this.$set(this.favorites, item, !this.favorites[item]);
    }
  }
})

<div id="app">
  <button @click="toggleFavorite('item123')" v-show="!favorites['item123']">Add to Favorites</button>
  <button @click="toggleFavorite('item123')" v-show="favorites['item123']">Remove from Favorites</button>

  <button @click="toggleFavorite('item456')" v-show="!favorites['item456']">Add to Favorites</button>
  <button @click="toggleFavorite('item456')" v-show="favorites['item456']">Remove from Favorites</button>
  
  <hr>
  
  <div v-for="y in 10" :key="y">
    <button @click="toggleFavorite(`item${y}`)" v-show="!favorites[`item${y}`]">Add to Favorites</button>
    <button @click="toggleFavorite(`item${y}`)" v-show="favorites[`item${y}`]">Remove from Favorites</button>
  </div>
</div>

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

Answer 2

Consider using a dictionary structure instead of a singular variable:

data() {
  return {
    favorites: {}
  }
},

Rather than toggling a boolean value, toggle a property within the object:

<button @click="toggleFavorite('itemA')" v-show="!favorites['itemA']">Add to Favorites</button>
<button @click="toggleFavorite('itemA')" v-show="favorites['itemA']">Remove from Favorites</button>

The toggle method:

methods: {
  toggleFavorite(item) {
    this.$set(this.favorites, item, !this.favorites[item]);
  }
}

Check out this demonstration if you need further clarification:

new Vue({
  el: '#app',
  data() {
    return {
      favorites: {}
    }
  },
  methods: {
    toggleFavorite(item) {
      this.$set(this.favorites, item, !this.favorites[item]);
    }
  }
})

<div id="app">
  <button @click="toggleFavorite('item123')" v-show="!favorites['item123']">Add to Favorites</button>
  <button @click="toggleFavorite('item123')" v-show="favorites['item123']">Remove from Favorites</button>

  <button @click="toggleFavorite('item456')" v-show="!favorites['item456']">Add to Favorites</button>
  <button @click="toggleFavorite('item456')" v-show="favorites['item456']">Remove from Favorites</button>
  
  <hr>
  
  <div v-for="y in 10" :key="y">
    <button @click="toggleFavorite(`item${y}`)" v-show="!favorites[`item${y}`]">Add to Favorites</button>
    <button @click="toggleFavorite(`item${y}`)" v-show="favorites[`item${y}`]">Remove from Favorites</button>
  </div>
</div>

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

Answer 3

Answer №2

The duplication occurs due to the similarity in v-show values. It may not be considered the best practice for Vue. You can opt for using v-if and v-else directives for data value comparisons, or simply update the text based on the value.

new Vue({
  el: '#app',
  data: {
    isFavorite: false,
    isFavorite2:false
  },
  methods: {
    toggleFavorite() {
      this.isFavorite = !this.isFavorite;
    },
    toggleFavorite2() {
      this.isFavorite2 = !this.isFavorite2;
    }
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <button @click="toggleFavorite" v-show="!isFavorite">Add to favorites</button>
  <button @click="toggleFavorite" v-show="isFavorite">Delete from favorites</button>

<button @click="toggleFavorite2" v-show="!isFavorite2">Add to favorites 2</button>
  <button @click="toggleFavorite2" v-show="isFavorite2">Delete from favorites 2</button>
</div>

Answer 4

The duplication occurs due to the similarity in v-show values. It may not be considered the best practice for Vue. You can opt for using v-if and v-else directives for data value comparisons, or simply update the text based on the value.

new Vue({
  el: '#app',
  data: {
    isFavorite: false,
    isFavorite2:false
  },
  methods: {
    toggleFavorite() {
      this.isFavorite = !this.isFavorite;
    },
    toggleFavorite2() {
      this.isFavorite2 = !this.isFavorite2;
    }
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <button @click="toggleFavorite" v-show="!isFavorite">Add to favorites</button>
  <button @click="toggleFavorite" v-show="isFavorite">Delete from favorites</button>

<button @click="toggleFavorite2" v-show="!isFavorite2">Add to favorites 2</button>
  <button @click="toggleFavorite2" v-show="isFavorite2">Delete from favorites 2</button>
</div>

Utilize Vue to localize the click events of buttons on the webpage

Answer №1

Answer №2

Similar questions

Updating JQuery function after window is resized

"Regarding compatibility with different browsers - IE8, Firefox3.6, and Chrome: An inquiry on

Creating JSON arrays with JavaScript and jQuery

Enhance your Verold model object with engaging animations

What is the best way to pass a slot's @click event handler to its parent component, allowing the parent to bind it to an element using v-bind, similar to how it's done in Vuet

Creating unsightly class names using Node.js

What is the best way to target the iframe within the wysihtml5 editor?

Scraping JavaScript Content Webpages with VBA

Developing a dynamic table using HTML and JavaScript

Is there a way to determine if a chosen date and time are prior or subsequent to the current date and time in an AngularJS environment?

locating the truth value of the data in an array retrieved from MongoDB

Utilizing Angular 1.4.8 and lodash to effectively parse an array of objects with conditional parameters

Tips on leaving comments inside a render <div>

Is it no longer possible to create custom linked Context Menus in Tabulator 5?

How to accentuate search results using Angular filters and conceal non-matching text?

Switch or toggle between colors using CSS and JavaScript

Display a division upon choosing an option

Custom mute bot using Discord.js with the ability to specify duration and provide a reason

The width of Highcharts increases proportionally to the growth of the chart's width

The div height adjustment peculiarities in IE7 and IE8 are causing quite a stir