Vue.js: templates with param

by Eugene Manager

HTML

<script type="x-template" id="tpl-compon">
    <h1>This is templated {{param_text}}</h1>
</script>

<div id="app">
    Hello!
    <div v-for="elem in arr">
      <component is="card" :param_text="elem.text">
      </component>
    </div>
</div>

JavaScript

var app = new Vue({
    el: '#app' ,
    data: {
      arr: [
        {text: 'foo'},
        {text: 'boo'}
      ],
    },
    components: {
        card: {
        	props: ['param_text'],
    			template: '#tpl-compon'
        }
    }
});