Vuejs Sibling Component data passing with method

Question

I have a Vuejs Laravel page with Parent and 2 child

In my Parent template I have

<template>
<div>
    <h4>DATA ANALYSIS</h4>
    <dataAnalysisGraph />
    <br>
    <hr>
    <dataAnalysisTable />
</div>

and in my dataAnalysisGraph child component i have a method that send request everytime the dropdown changes.

    //dataAnalysisGraph 
    <template> 
          <div>
              <div> 
                <select class="form-control select" name="" @change="GenerateChart" v-model='chartType' >
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
            
                </select>
              </div>
          
            <br><br><br>
              <highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
          </div>
        </template>
    <script>
export default {
    data() {
        return {
        data: [],
        }
    },
    methods: {
        GenerateChart(){
            this.axios
                .get('api/'+this.chartType)
                .then(response => {
                    this.data = response.data;
                   
            });
        },
    },
    created() {
        this.GenerateChart();
    },      
};
</script>

In my dataAnalysisTable child component. I want to get the this.data from dataAnalysisGraph component and pass it to the dataAnalysisTable and updates it every time the dropdown form dataAnalysisGraph component changes.

this is my dataAnalysisTable component currently

<template>
    <div>
        {{data}}
    </div>
    
</template>
<script>
export default {
    data() {
        return {
        data: [],
        };
    },
    methods: {
        
    },
    created() {
       
    },      
};
</script>

parapente · Accepted Answer · 2022-06-16 19:43:14Z

1

You can emit an event inside dataAnalysisGraph returning this.data to the parent and connect this value using v-model to the dataAnalysisTable component. You can read more in the vuejs guide specifically in the "Usage with v-model" section.

answered Jun 16, 2022 at 19:43

parapente

6306 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs Sibling Component data passing with method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related