CODEWITHSUNDEEP
laravelvue.js
Vincent Dapiton
Vincent Dapiton

Reputation: 587

Vuejs Sibling Component data passing with method

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>

Upvotes: 0

Views: 68

Answers (1)

parapente
parapente

Reputation: 610

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.

Upvotes: 1

Related Questions