Vue 2 - insert data from main instance into component

Question

I am having a bit of an issue with rendering template. It seems that data from the main instance isn't transfered to the component.

This is the Vue code:

Vue.component('country-list', {


    template: `
            <tr class=parent>
                <country v-for="country in countryList">
                    <td>Render This</td>
                </country>
            </tr>
    `,

    props: ['countries'],

    data() {
        return {
            countryList: this.countries
        }
    }


});


Vue.component('country', {


    template: `<tbody class=parent><slot></slot></tbody>`


});


let App = new Vue({

    el: '#app-container',

    data: {
        countries: []
    },

    created() {
        this.getCountries()
    },

    methods: {

        getCountries() {

            var self = this;

            axios.get('/admin/countries')
                .then(function (response) {
                    self.countries = response.data.data;
                })
                .catch(function (error) {
                    console.log(error);
                });

        },

        filterCountries() {

        },

        updateCountry(event) {


        }
    }

})

And the HTML code which is using country-list template:

<table class="table table-striped table-hover">

    <thead>

        <tr>
            <td>
                <input
                    type="text"
                    id="country-filter"
                    @keyup="filterCountries">
            </td>
        </tr>

        <tr>

            <td>Country Name</td>
            <td>Visible</td>
            <td>Order</td>
            <td>Actions</td>

        </tr>

    </thead>

    <tbody>

        <country-list></country-list>

    </tbody>



</table>

What am I doing wrong here?

Answer 1

Several issues with the code.

• You need to pass the data to the country-list component.
• When rendering a table, you need to use is in order for your table to render properly. This is specific, for example, to table layouts.
• It's helpful if you use a valid table HTML structure.

I've corrected these issues in the code below. I'm using a hard coded list of countries in order to get something to render.

FWIW, I don't know what your country component is intended to do given you are passing it's content in a slot.

console.clear()

const countries = [
  {
    name: "USA",
    visible: 1,
    order: 1
  },
  {
    name: "Germany",
    visible: 1,
    order: 2
  },
  {
    name: "China",
    visible: 1,
    order: 3
  },
]

Vue.component('country-list', {
    template: `
    <tbody>
      <tr is="country" v-for="country in countryList" :key="country.order">
        <td>{{country.name}}</td>
        <td>{{country.order}}</td>
      </tr>
    </tbody>
    `,
    props: ['countries'],
    data() {
        return {
            countryList: this.countries
        }
    }
});


Vue.component('country', {
    template: `<tr class=parent><slot></slot></tr>`
});

let App = new Vue({
    el: '#app-container',
    data: {
        countries: []
    },
    created() {
        this.getCountries()
    },
    methods: {
        getCountries() {

            var self = this;

            this.countries = countries
        },

        filterCountries() {

        },

        updateCountry(event) {


        }
    }

})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app-container">
<table class="table table-striped table-hover">
    <thead>
        <tr>
            <td>
                <input
                    type="text"
                    id="country-filter"
                    @keyup="filterCountries">
            </td>
        </tr>
        <tr>
            <td>Country Name</td>
            <td>Visible</td>
            <td>Order</td>
            <td>Actions</td>
        </tr>
    </thead>
    <tbody is="country-list" :countries="countries"></tbody>
</table>
</div>