Reloading a Vue component that is inside of another Vue component

Question

I have Vue component 01 witch is holding another Vue component witch would be Vue component 02. In Vue 01 I'm using an ajax request to get data and pass it to the vue 02 as the props of the vue 02. But the problem is after one ajax request vue 02 would not refresh its props according to new data unless i refresh the web browser, is there any way to refresh only the component from vue 01 as with each ajax request?

edit: this is the child vue inside the vue 01

<show-data-table
            v-if="show_data_table"
            :data=this.selected_table_data
            :col_names=this.selected_table_col_names
            :header=this.header
            :columns_count=this.col_count
            :rows_count=this.row_count
            :tble_name=this.selected_table_name
            :database=this.db_name
        ></show-data-table>

and this is the ajax request:

 axios.post("/database/information-table", formData, config, {})
                .then(response => {
                    if (response.data.code == 200) {
                        // console.log(response.data);
                        this.selected_table_data = [];
                        this.selected_table_name = '';
                        this.selected_table_col_names = [];
                        this.selected_table_data = response.data.data;
                        this.selected_table_name = response.data.table_name;
                        this.selected_table_col_names = response.data.column_names;
                        
                        this.show_data_table = true;
                    }
                });

and the data section:

data() {
        return {
            db_name: this.database_name,
            tables: this.database_tables,
            table_name: "",
            selected_table_name: "",
            selected_table_data: [],
            selected_table_col_names: [],
            show_data_table: false,
            name: "",
            header: true,
            row_count: 0,
            col_count: 0,
            servs: false,
        };
    },

You can assign key to a component. <my-component :key="myComponentKey"></my-component>. ChangemyComponentKey to any value you want each time you want to refresh the component. But it is weird that Vue is not refreshing the props. Could you share your code? — Damon
You are doing something wrong, if you pass data through props to the child component and if parent component data is updated then things should work as we are setting up reactivate through props, if things are still not clear Ping me on skype: syed_haroon — Syed
guys i have posted the code here and the parent is responsive to new data but the child is not accepting them for somewhat reason — Udara Nayana

Michal Levý Michal Levý · Accepted Answer · 2020-11-02T05:10:38

Hard to say without more code...

Two most common mistakes:

All data in parent which should be reactive must be declared in data section of parent component otherwise it will not be reactive:

data: {
  return() {
    selected_table_data: [],
    selected_table_name: [],
    selected_table_col_names: []
  }
}

https://vuejs.org/v2/guide/instance.html#Data-and-Methods

Child should use props directly instead of declaring it's own data and initialize it from props:

Don't do that (child):

data: {
  return() {
    selected_table_data: this.selected_table_data,
    selected_table_name: this.selected_table_name,
    selected_table_col_names: this.selected_table_col_names
  }
}

Why: data function of child is run only once when the component is created. If it stores references given from parent by props and the props values of the parent are later replaced by new values, child won't know about the change.

Reloading a Vue component that is inside of another Vue component

1 Answers