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?

You're trying to put tbody as a direct child of tr. You can't do that. — Eric Guan
– Eric Guan, Commented Jun 19, 2017 at 19:28

tony19 · Accepted Answer · 2022-07-16 02:00:28Z

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/[email protected]/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>

edited Jul 16, 2022 at 2:00

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 19, 2017 at 19:29

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sasha Over a year ago

Added this and still nothing :/. I am getting this error, if it is of any help: vendor.js:862 [Vue tip]: <country v-for="country in countries">: component lists rendered with v-for should have explicit keys. See vuejs.org/guide/list.html#key for more info. found in

Bert Over a year ago

@Sasha Yes, you have some HTML issues I am working on correcting.

Sasha Over a year ago

This is working :). Thanks a lot for the great and quite resourceful answer :)

Collectives™ on Stack Overflow

Vue 2 - insert data from main instance into component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related