Vue 2 - 将数据从主实例插入组件

Question

渲染模板有点问题。似乎来自主实例的数据没有传输到组件。

这是 Vue 代码：

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) {


        }
    }

})

以及使用 country-list 模板的 HTML 代码：

<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>

我在这里做错了什么？

Answer 1

代码有几个问题。

• 您需要将数据传递给country-list 组件。
• 渲染表格时，您需要使用is 才能正确渲染表格。例如，这是特定于表格布局的。
• 使用有效的表格 HTML 结构会很有帮助。

我已在下面的代码中更正了这些问题。我正在使用硬编码的国家/地区列表来获取要渲染的内容。

FWIW，我不知道您的 country 组件打算做什么，因为您将其内容传递到插槽中。

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>