Как запустить функцию в Vuejs после создания компонента в? - PullRequest
Новая
       16

Как запустить функцию в Vuejs после создания компонента в?

0 голосов
/ 24 апреля 2018

Я создал компонент, который имеет функцию, которая выполняет внешние вызовы API, а затем заполняет массив. Я использовал create () life hook, чтобы запустить функцию в первый раз. Я передаю переменную из родительского компонента в этот компонент, а затем на основе этого изменения переменной хочу, чтобы функция снова запустилась. Как мне этого добиться.

Прикрепление моего кода ниже 

<template>
<div>
<p>{{ data_to_show_on_mainpage }}</p>
</div>
</template>


<script>
import axios from 'axios'
export default {
name:  'GetCategoryItemsAndDisplayOne',
props: ['categoriesfordisplay','ismainpage', 'catalogselected'],

data(){
    return {
        IsMainPage_1 : "",
        data_to_show_on_mainpage : [],


    }
 },

 watch: {
    catalogselected: function(){

        this.GetItemsToShowonMainPage()


    }
  },

 methods:{
    changevalue(){
        console.log("i am reducing it to emplty after change of catalog")
        this.IsMainPage_1 = this.catalogselected
        this.data_to_show_on_mainpage = []
    },
    CatlogService(catlog_name,category,gender,mainpage){


        let url = "http://localhost:5000/xyz/" + (this.catalogselected).replace(/'/g,"%27") +"/api/"+ (gender) + "/catalogvis/" + (category) +"/items"
        console.log(encodeURI(url))
        axios.get(encodeURI(url)).then((resp)=>{
            this.data_to_show_on_mainpage.push(resp.data.response.Results.results[0])

        })
        .catch(err => {
            console.log("we got an error the url is " + url)
            console.log(err);
        })
    },

    GetItemsToShowonMainPage(){

        this.changevalue()


        if(this.categoriesfordisplay.men_for_display.length>0){
            for(let i =0;i<this.categoriesfordisplay.men_for_display.length;i++){
                let category = this.categoriesfordisplay.men_for_display[i].replace(/"/g,"%27");

                this.CatlogService(this.catalogselected,category,'men',this.ismainpage)
            }

        }
        if(this.categoriesfordisplay.women_for_display.length>0){

            for(let i = 0;i<this.categoriesfordisplay.women_for_display.length;i++){
                let category = this.categoriesfordisplay.women_for_display[i].replace(/"/g,"");

                this.CatlogService(this.catalogselected,category,'women',this.ismainpage)
            }

        }
    },



},
created(){
    this.GetItemsToShowonMainPage()
}



}
</script>

<style>

</style>

Как запустить функцию GetItemsToShowonMainPage () при каждом изменении catalogselected varaible.

1 Ответ

0 голосов
/ 25 апреля 2018

выглядит хорошо.Как говорит @ a-lau, убедитесь, что родитель обновляет catalogselected prop

Кстати, вы можете написать свой наблюдатель таким образом и полностью удалить хук created: 

watch: {
  catalogselected: {
    handler: "GetItemsToShowonMainPage",
    immediate: true
  }
}

Если у вас все еще есть проблемы, вы можете написать минимальное воспроизведение на https://codesandbox.io/s/vue

...