Vue.js Vue 2-道具在一个模板中正常工作，而在另一个模板中不正常工作

我有以下Vue的主要实例：

let App = new Vue({

    el: '#app-container',

    data: {
        countries: []
    },

    created() {
        this.getCountries()
    },

    methods: {

        getCountries() {

            let self = this;

            axios.get('/admin/countries')
                .then(function (response) {

                    self.countries = response.data;

                })
                .catch(function (error) {
                    console.log(error);
                });

        },

        filterCountries(event) {

            let name = event.target.value;

            let self = this;

            if(name.length > 2) {

                axios.get('/country/search', {
                    params: {
                        name: name
                    }
                })
                .then(function (response) {
                    self.countries = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });

            }

            if((event.keyCode === 8 && name.length == 2) || !name.length){
                this.getCountries();
            }
        },

        updateCountry(event) {

            let parent = event.target.closest('.parent');

            let countryName = parent.getElementsByClassName('country-name')[0].value;

            let countryOrder = parent.getElementsByClassName('country-order')[0].value;

            axios.post('/country/insert', {
                countryName: countryName,
                countryOrder: countryOrder
            })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });


        }
    }

})

我有一个正在工作的模板：

Vue.component('country-list', {
    template: `
    <tbody>
        <tr is="country" v-for="country in countries.data">
            <td>
                <input
                    type="text"
                    name="name"
                    class="form-control country-name"
                    :value="country.name"
                 >
            </td>
            <td>{{country.show? 'Yes' : 'No'}}</td>
            <td>
                <input
                    type="text"
                    name="order"
                    class="form-control country-order"
                    :value="country.order"
                 >
             </td>
            <td>
                <button class="btn btn-primary">{{ country.show ? "Hide" : "Show" }}</button>
                <button class="btn btn-success"
                    @click="updateCountry"
                    :data-id="country.id">Update</button>
            </td>
        </tr>
    </tbody>
    `,

    props: ['countries'],

    methods: {

        updateCountry(event) {

            let countryID = event.target.dataset.id;

            let parent = event.target.closest('.parent');

            let countryName = parent.getElementsByClassName('country-name')[0].value;

            let countryOrder = parent.getElementsByClassName('country-order')[0].value;

            axios.post('/country/insert', {
                id: countryID,
                name: countryName,
                order: countryOrder
            })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });

        }

    }
});

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

---

您没有通过模板传递道具：

<tfoot is="pagination-list"></tfoot>

应该是：

<tfoot is="pagination-list" :countries="countries"></tfoot>

---

在第二个模板中，您需要使用v-if检查属性是否存在，因为在安装组件时它不存在。在创建getCountries时，属性应该自动更新，就像在第一个模板中一样，或者我缺少什么？我们看不到安装分页列表的模板。它是主应用程序的子应用程序吗？你正在正确地传递道具。另外，我很好奇，您将国家视为从ajax调用检索的简单数组，但在页脚中您指的是countries.current_页面。您的响应数据是什么样子的？@MarkM-我在使用模板和响应对象的地方添加了HTML代码。这很有效。我想我会坚持JQuery:D。非常感谢你帮助我：

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

    <thead>

        <tr>
            <td>
                <input
                    class="form-control"
                    type="text"
                    id="country-filter"
                    @keyup="filterCountries"
                    placeholder="Filter countries by name">
            </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>

    <tfoot is="pagination-list"></tfoot>

</table>

Object {…}
current_page:1
data:Array(20)
from:1
last_page:13
next_page_url:"http://smuvajse.app/admin/countries?page=2"
path:"http://smuvajse.app/admin/countries"
per_page:20
prev_page_url:null
to:20
total:249
__ob__:Observer
get current_page:function reactiveGetter()
set current_page:function reactiveSetter(newVal)
get data:function reactiveGetter()
set data:function reactiveSetter(newVal)
get from:function reactiveGetter()
set from:function reactiveSetter(newVal)
get last_page:function reactiveGetter()
set last_page:function reactiveSetter(newVal)
get next_page_url:function reactiveGetter()
set next_page_url:function reactiveSetter(newVal)
get path:function reactiveGetter()
set path:function reactiveSetter(newVal)
get per_page:function reactiveGetter()
set per_page:function reactiveSetter(newVal)
get prev_page_url:function reactiveGetter()
set prev_page_url:function reactiveSetter(newVal)
get to:function reactiveGetter()
set to:function reactiveSetter(newVal)
get total:function reactiveGetter()
set total:function reactiveSetter(newVal)
__proto__:Object

<tfoot is="pagination-list"></tfoot>

<tfoot is="pagination-list" :countries="countries"></tfoot>