onclick multiple elements in vue js

Question

I am creating a feature to hide and show description of image thumbnails (if user click the image thumbnail, the description will be shown animated). I already followed tutorial in VueJS about transition but unfortunately only one thumbnail works and the rest don't. I already removed the script during my try and errors. So, let take script of jquery as an example (pseudo code since I can't recall jquery syntax for now):

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

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

We only need that script and alert(p.text) has different value based on which <p> that user clicked and we dont need to write script for each <p>

How to do it in VueJS ? in nutshell I am confused how to apply one instance of VueJS with click event on it for many elements.

Share live demo or any fiddle ? In your given code there is no vuejs involved — Niklesh Raut
– Niklesh Raut, Commented Nov 21, 2017 at 6:52
sorry i dont have any fiddle. I hope that jQuery script explains what i am trying to do. in nutshell i am confused how to apply one instance of vue js for many elements. — Kakashi
– Kakashi, Commented Nov 21, 2017 at 6:56

Niklesh Raut · Accepted Answer · 2017-11-21 07:07:27Z

2

Do you want like this

var V = new Vue({
  el:"#app",
  data:{
    items:[
      {name:'Test1',desc:'test1 Desc',show:false},
      {name:'Test2',desc:'test2 Desc',show:false},
      {name:'Test3',desc:'test3 Desc',show: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.show = !item.show">{{item.name}}</span>
    <span class="" v-if="item.show">: {{item.desc}}</span>
   </div>
</div>

answered Nov 21, 2017 at 7:07

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

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

4 Comments

Kakashi Over a year ago

I will try this code and combine with transition guide in vue js. thank you! i will be back again if i stuck. thank you

Kakashi Over a year ago

what if vue has no idea how many child elements (items) ? i mean the span elements has rendered via conventional way (loop from php) not from loop from an array javascript.

Niklesh Raut Over a year ago

share what data you have from php ?

Kakashi Over a year ago

gist.github.com/mockiemockiz/166b65b7b03f982bac25f8498c64c77a ignore this part ` @click="showDetail"`. that doesnt work.

Yuchuan · Accepted Answer · 2017-11-21 06:57:36Z

0

<template>
  <div>
    <p v-for="item in numbers" @click="fun(item)">{{item}}</p>
  </div>
</template>

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

I's different between MVC and MVVM.

answered Nov 21, 2017 at 6:57

Yuchuan

1

2 Comments

Kakashi Over a year ago

yes. it's harder than jQuery and more complicated. jQuery can solve this problem with only few scripts and more faaaaar easier. or jQuery and Vue js was created for different purpose?

Yuchuan Over a year ago

What if the array contain 10000 numbers?Some easy demos shouldn't use VUE, but when your code are more complex, a MVVM framework will help you a lot. And I think this framework's best contribution is separating front and rear ends, so front-end engineer could do more things than past.

Collectives™ on Stack Overflow

onclick multiple elements in vue js

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related