Question

我有以下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>`
});

我正在尝试使用相同道具制作另一个模板（国家），但我什么都没得到（在这种情况下，我有以下错误：

vendor.js:753 [Vue warn]: Error in render function: "TypeError: Cannot read property 'current_page' of undefined"

found in

---> <PaginationList>
       <Root>

）：

Vue.component('pagination-list', {

    template: `
        <tfoot>
            <tr>
                <td>{{countries.current_page}}</td>
            </tr>
        </tfoot>
    `,

    props: ['countries']
});

使用模板的HTML代码：

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

console.log（self.countries）数据：

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

Answer 1

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

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

应该是：

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

Vue 2 - 道具在一个模板中正常工作而在另一个模板中无法正常工作

1 个答案: