How to set parent component data from child component in vuejs

Question

Below is the parent component and child component. I am trying to access tabs_value data in the parent component from the child component but it is returning as undefined. this.$parent.tabs_value returns as undefined when I try to access it inside the run method in the child component. Please help me find where I am going wrong? Below is the code

Parent Component

<template>
  <div>
    <v-layout row wrap>
      <v-flex xs12 sm12 lg12>
        <div>
          <v-card>
              <v-tabs v-model="tabs_value"
                      color="black"
                      centered
                      show-arrows
              >
                <v-toolbar-title>Custom</v-toolbar-title>

                <v-spacer></v-spacer>
                <v-tab  href="#build">Build</v-tab>
                <v-tab  href="#run">Run</v-tab>
              </v-tabs>

            <v-tabs-items v-model="tabs_value">
              <v-tab-item value="#build" id="build">
                <Build ref="build_reports" />
              </v-tab-item>
              <v-tab-item value="#run" id="run">
                <Run :reports="reports" ref="run_reports" />
              </v-tab-item>
            </v-tabs-items>
          </v-card>
        </div>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
  import Build from 'views/build.vue'
  import Run from 'views/run.vue'
  import URLs from 'views/routes'
  export default {
    components: {
      Build,
      Run
    },
    data: function() {
      return {
        tabs_value: 'build',
        isLoaded: true,
        reports: []
      }
    },
    created() {
      this.fetch();
    },
    methods: {
      fetch() {
        this.$axios.get(URLs.REPORTS_URL)
        .then(response => {
          this.reports = response.data
        });
      }
    }
  };
</script>

Child Component run.vue

<template>
  <div>
    <v-layout row wrap>
      <v-flex xs12 sm12 lg12>
        <div>
          <v-card>
            <div>
              <v-data-table
                :headers="headers"
                :items="reports"
                hide-default-footer
                :mobile-breakpoint="0">

                <template slot="item" slot-scope="props">
                  <tr>
                    <td>{{props.item.name}}</td>
                    <td>
                      <div>
                        <v-tooltip attach left>
                          <template v-slot:activator="{ on, attrs }">
                            <a v-bind="attrs" v-on="on"
                              class="" href='javascript:void(0);'
                              @click="run(props.item)"><i small slot="activator" dark color="primary" class="fas fa-play"></i></a>
                          </template>
                          <span>Run</span>
                        </v-tooltip>
                      </div>
                    </td>
                  </tr>
                </template>
                <template slot="no-data" >
                  <v-alert id='no-data' :value="true" color="error" icon="warning">
                    No Reports Yet
                  </v-alert>
                </template>
              </v-data-table>
            </div>
          </v-card>
        </div>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
  import URLs from 'views/routes'

  export default {
    props: ['reports'],
    data: function() {
      return {
        headers: [
          { text: 'Name', value: 'name', sortable: false },
          { text: 'Actions', sortable: false }
        ],
      }
    },
    methods: {
      run(report) {
        debugger
        // this.$parent.tabs_value returns as undefined
      }
    }
  }
</script>

Answer 1

you can use component events i.e $emit.

Below is example which will tell you how to use $emit. (https://vuejs.org/guide/components/events.html#emitting-and-listening-to-events)

Parent Component

<template>
  <ChildComponent @updateTabsValue="updateTabsValue"/>
</template>
<script>
export default {
data(){
  return {
    tabsValue: 'tabs',
  };
},
methods:{
  updateTabsValue(val){
    this.tabsValue = val;
  }
},
}
</script>

Child Component

<template>
  <button @click="$emit('updateTabsValue','newVal')"/>
</template>