扩展Vue组件会导致多个GET调用

时间:2017-04-29 22:13:29

标签: javascript vuejs2

我有一个Base Vue组件,用于处理项目。现在我用CompanyItem和EducationItem扩展了该组件。但是当我加载两个指令时,它将调用GET方法4次。另外:我在2个模型上有一个点击处理程序(例如:openUpdateOrCreateModal()),它在一个指令中加载。当我点击时,也会触发另一个指令。有人有想法吗?

module.exports = {
    props: ['user', 'update_url', 'store_url', 'delete_url', 'show_url', 'index_url', 'item_type'],

    mounted() {
        Bus.$emit('index');
    },
    data(){
        return {
            form: {},
            items: [],
            mainItem: {},
            item: {},
        }

    },
    created(){

    },
    methods: {
        resetForm(){
            this.form = new SparkForm({
                general: {
                    title: null,
                },
                item: this.getItemProperties(),
                address: {
                    address_line_1: null,
                    address_line_2: null,
                    city: null,
                    province: null,
                    zip_code: null
                }
            });


            this.mainItem = null;

        },
        getItemProperties(){
            return {};
        },

        showModal(){
            $('#create-update-'+this.item_type+'-modal').modal('show');
        },
        hideModal(){
            $('#create-update-'+this.item_type+'-modal').modal('hide');
        },

        /**
         * Gets a list with specific items
         */
        index(){
            console.log('Call index');
            axios.get(this.index_url)
                .then(response =>
                {
                    this.items = response.data.data;
                });
        },
    }
};

教育

var base = require('./cv-item-base');
Vue.component('cv-educations-management', {
    mixins: [base],
    methods: {
        getItemProperties(){
            return {
                start_at: null,
                end_at: null,
                description: null,
                finished_education: null,
                level: null,
            }
        }
    }
});

公司

var base = require('./cv-item-base');
Vue.component('cv-company-list', {
    mixins: [base],
    methods: {
        getItemProperties(){
            return {
                start_at: null,
                end_at: null,
                position: null,
                description: null,
                phone_number: null,
                branch: null,
                referral: null,
            }
        }
    }
});

HTML

<cv-company-management :user="user"
                       :update_url="'{{route('application.manage.companies.update')}}'"
                       :show_url="'{{route('application.manage.companies.show')}}'"
                       :delete_url="'{{route('application.manage.companies.destroy')}}'"
                       :store_url="'{{route('application.manage.companies.store')}}'"
                       :index_url="'{{route('application.manage.companies.index')}}'"
                       :item_type="'company'"
                       inline-template>

</cv-company-management>



<cv-education-management :user="user"
                       :update_url="'{{route('application.manage.educations.update')}}'"
                       :show_url="'{{route('application.manage.educations.show')}}'"
                       :delete_url="'{{route('application.manage.educations.destroy')}}'"
                       :store_url="'{{route('application.manage.educations.store')}}'"
                       :index_url="'{{route('application.manage.educations.index')}}'"
                       :item_type="'education'"
                       inline-template>

    </cv-education-management>

0 个答案:

没有答案