Triggering events on multiple elements with Vue.js when clicked

Question

Triggering events on multiple elements with Vue.js when clicked

I am currently working on a feature that involves hiding and showing descriptions of image thumbnails when clicked by the user. I tried following a VueJS tutorial on transitions, but unfortunately only one thumbnail is properly functioning while the rest are not. After some trial and error, I decided to remove the script. Let's consider a pseudo code example using jQuery:

<div id="app">
   <p> 1 </p>
   <p> 2 </p>
</div>

jQuery("#app p").click(function(){
      alert(p.text);
   });

We just need this script where alert(p.text) will display different values depending on which <p> element the user clicks on, without having to write separate scripts for each individual element.

I'm struggling with implementing a similar functionality in VueJS. In essence, I'm unsure how to apply one instance of VueJS with a click event to multiple elements at once.

javascript vue.js vuejs2

Answer 1

Answer №1

Would you like it such as this?

var X = new Vue({
  el:"#app",
  data:{
    items:[
      {name:'Example1',desc:'example1 Description',display:false},
      {name:'Example2',desc:'example2 Description',display:false},
      {name:'Example3',desc:'example3 Description',display:false},
    ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
   <div v-for="item in items">
    <span @click="item.display = !item.display">{{item.name}}</span>
    <span class="" v-if="item.display">: {{item.desc}}</span>
   </div>
</div>

Answer 2

Would you like it such as this?

var X = new Vue({
  el:"#app",
  data:{
    items:[
      {name:'Example1',desc:'example1 Description',display:false},
      {name:'Example2',desc:'example2 Description',display:false},
      {name:'Example3',desc:'example3 Description',display:false},
    ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
   <div v-for="item in items">
    <span @click="item.display = !item.display">{{item.name}}</span>
    <span class="" v-if="item.display">: {{item.desc}}</span>
   </div>
</div>

Answer 3

Answer №2

<template>
  <div>
    <p v-for="element in items" @click="handleClick(element)">{{element}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items:[1,2,3,4,5]
    }
  },
  methods:{
    handleClick:function(selectedItem){
      alert(selectedItem);
    }
  }
}
</script>

Exploring the distinctions between MVC and MVVM architectures.

Answer 4

<template>
  <div>
    <p v-for="element in items" @click="handleClick(element)">{{element}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items:[1,2,3,4,5]
    }
  },
  methods:{
    handleClick:function(selectedItem){
      alert(selectedItem);
    }
  }
}
</script>

Exploring the distinctions between MVC and MVVM architectures.

Triggering events on multiple elements with Vue.js when clicked

Answer №1

Answer №2

Similar questions

Tips for retrieving multiple relationship data in my Laravel Vue project

Does React trigger a re-render when setState is called even if the state value remains unchanged?

How can I hide a root layout component in specific nested routes within the app directory of Next.js?

Opening a modal in React Material UI from an autocomplete component results in losing focus

Refreshing the parent page in Oracle Apex upon closing the child window.When the child window

Unlocking the AngularJS variable within the template script

Obtain every possible sequence of US phone number segments for a provided number

Removing text that was added via the chart renderer in Highcharts can be accomplished by identifying the specific element

Ways to style a div element in CSS to achieve a unique shape

"An error has occurred: ENOENT - The specified file or directory does not exist, cannot create directory" on the live website

The debounced function in a React component not triggering as expected

What steps should I take to ensure that clicking this button triggers the API request and returns the data in JSON format?

effective method for iterating through JSON data using JavaScript or jQuery

Creating a responsive gallery using CSS techniques

I am looking to use flexbox and Vue.js to organize my sent messages in blue on the right and received messages in yellow on the left. How can I achieve this grouping effectively?

How to extract value from the URL in NextJS

Steps to assign a value to an input element using the state in a React application

Attempting to grasp the intricacies of HTML5/JS video playback quality

React's createRef() versus callback refs: Which one provides the ultimate edge in performance?

Manually update the DOM rather than depending on React's reconciliation process