[SOLVED] Add @click event to <div> tag in list and pass html5 data


I would like to add a click event to a <div> tag in a virtual list and pass the data attribute uuid.

	'<li>' +
	'<a href="#"  class="item-content">' +
		'<div class="item-inner">' +
			'<div class="item-title-row">' +
				'<div class="item-title"><p><div class="chip"><div class="chip-label">{{desc}}</div></div></p> '+
					'<span class="badge color-green">{{cat}}</span> '+
					'<span class="badge color-red">{{price}}</span>'+
				'</div>' +
				'<div class="item-after">' +
					'<div data-uuid={{uuid}} @click="addToCart" class="chip">' +
						'<div class="chip-media bg-color-pink">' +
							'<i class="icon f7-icons ios-only">add_round</i>' +
							'<i class="icon material-icons md-only">add_circle</i>' +
						'<div class="chip-label">Add to Cart</div>'+
					'</div>	'+										
				'</div>' +
			'</div>' +																							
		'</div>' +
	'</a>' +
	// Item height
	height: self.$theme.ios ? 63 : 73,

Note the code at the chip '<div data-uuid={{uuid}} @click="addToCart" class="chip">'

And ideas or possible workarounds to capturing events in virtual lists?

@ events are not supported in Template7, and supported only in page template loaded by router, so you can’t assign event listeners here.

Check similar topics

1 Like

@nolimits4web Thanks mate. This worked like charm!

1 Like