undefinedfix
Sign in

It is invalid to add binding event to DOM element generated by V-for in Vue

rauf101 edited in Sun, 27 Sep 2020

It seems invalid to add @ click and other binding events to DOM elements generated by V-for in Vue. Is there a solution?

7 Replies
Wingdom
commented on Sun, 27 Sep 2020

Yes, there should be a problem with your usage. Please post your code.

suxbr
commented on Sun, 27 Sep 2020

I can't say anything about you without code, but it's certainly OK

v7bet
commented on Sun, 27 Sep 2020

sure. It's just a matter of your code

user618650
commented on Mon, 28 Sep 2020

Try the delegate method in ready. That's what I wrote.

user8604766
commented on Mon, 28 Sep 2020
<div id="pro_list" v-for="item in pro_list">
    <div class="pro">
        <div><img src="../img/favicon.png"> <span>{{item.spin_times}}</span></div>
        <button @click="buySpins(item.spin_times,item.price)" class="btn btn-info"><b>¥</b><span>{{item.price}}</span></button>
    </div>
</div>
waterloomatt
commented on Mon, 28 Sep 2020

I also have some problems, please help me to have a look: < div class = "book store" >

        <ul class="clear-fix" id="experience">
            <li class="clear-left book-list" v-for="item in items" @click="experDetails(item.id)">
                <img v-bind:src="item.img" class="book-img" onerror="this.src='img/logo-gray.png'" />
                <p class="book-title" >《<span>{{item.title}}</span>》</p>
            </li>
        </ul>
    </div>

js:

methods: {

                experDetails: function (id) {
                    console.log(id)
                }
            }
Kerkouch
commented on Mon, 28 Sep 2020

I also encountered this problem. When Ajax comes out to use V-for traversal, it does not execute the @ click event. How can it be solved??

lock This question has been locked and the reply function has been disabled.