[Vuejs]-How to nest inline template components?

by

0👍

I think the problem may have happened in the inline-template mode. Although it allows more flexible template-authoring, inline-template makes scope of your templates harder to reason about.
I suggest that you could put inner content of overview and contact components into their template by template string instead of inline-template,as follow:

Vue.config.debug = true;
Vue.config.devtools = true;
Vue.component('overview', {
  	props: [ 'contacts', 'columns' ],
    template: `<table>
            <thead>
                <tr>
                    <template v-for="column in columns">
                        <th>{{ column }}</th>
                    </template>
                </tr>
            </thead>
            <tbody>
                <tr v-for="value in contacts">
                    <contact :contact="value" :columns="columns"></contact>
                </tr>
            </tbody>
        </table>`
});


Vue.component('contact', {
    props: [ 'contact', 'columns' ],
		template: `<div><td v-for="column in columns">{{ valueForColumn(column) }}</td></div>`,
    methods: {

        valueForColumn(column)
        {
        debugger
            if (column == 'name')
            {
              	return this.contact.firstName +' '+ this.contact.lastName;
            }
        }
    }
});


new Vue({
  	el: '#app'
});
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<div id="app">
    <overview :contacts="[
        {
          'id':1,
          'firstName':'John',
          'lastName':'Doe'
        },
        {
          'id':2,
          'firstName':'John',
          'lastName':'Doe'
        },
        {
          'id':3,
          'firstName':'John',
          'lastName':'Doe'
        }
    ]"
    :columns="[ 'id', 'name' ]"
    ></overview>
</div>

Leave a comment