Vue.js Bind Vue To Multiple Html Elements Of Same Class Name

Sep 13, 2017

Assuming you would like to bind Vue to multiple existing <div class="comment"> element in HTML.

<div class="comment" data-id="1"><div><div class="comment" data-id="2"><div>...

You would need to find all elements by class name and create individual Vue object for each element.

Note: el: '.comment' would only bind to the first element.

var comments = {  "1": {"content": "Comment 1"},  "2": {"content": "Comment 2"}}$('.comment').each(function () {  var $el = $(this)  var id = $el.attr('data-id')  var data = comments[id]  new Vue({    el: this,    data: data,    template: '<div class="comment">{{ content }}<div>'  })})

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.