TabIndex vue emit change tab value from another component

Michal Kubiak

I need to emit tabIndex value from another component after successfully submitting a form so it can go back to the first index, how can I achieve this?

This is my component:

<template>
  <b-tabs pills card v-model="tabIndex">
    <b-tab title="My Stocks">
      <b-container fluid="lg">
        <div>
          Batches (age shown in weeks)
          <br />
          <b-table small responsive :items="batches" :fields="fields"></b-table>
        </div>
        <div v-if="this.isData">
          <b-row>
            <b-col>
              <pie-chart
                :chartData="chartData"
                :options="chartData.options"
              ></pie-chart>
            </b-col>
          </b-row>
          <b-row>
            <b-col> <b>Total Stock:</b>{{ farmStock }}{{ measurement }} </b-col>
          </b-row>
        </div>
        <div v-else>
          <b-row class="justify-content-md-center">
            <b-col>
              <h6>you have no stocks</h6>
            </b-col>
          </b-row>
        </div>
      </b-container>
    </b-tab>
    <b-tab title="Batches">
      <BatchMain></BatchMain>
    </b-tab>
  </b-tabs>
</template>
<script>
import farmStockService from "@/service/FarmStockService";
import PieChart from "@/components/charts/PieChart.js";
import BatchMain from "@/components/stock/AddBatchMain";

export default {
  components: {
    PieChart,
    BatchMain,
  },

  data() {
    return {
      backgroundColor: [],
      chartData: {},
      measurement: "",
      farmStock: 0,
      gradeStock: [],
      isData: false,
      batches: [],
      fields: ["name", "age", "quantity", "shellfish", "stock_type"],
      tabIndex: 0,
    };
  },

It has tabs with v-model index, now in the same directory or folder I have another component that is imported into the one above called BatchMain which is in the second tab This component has a submit function:

async onSubmit(evt) {
      evt.preventDefault();
      if (!this.validateForm()) return;

      try {
        let data = {
          name: this.form.name,
          description: this.form.description,
          shellfish: this.form.shellfish,
          stockType: this.form.stockType,
          gradeList: this.form.gradeList,
          age: this.form.age,
          quantity: this.form.quantity,
          source: this.form.source,
          hatchery: this.form.hatchery,
          location: this.form.location,
        };
        let response = await batchService.addBatch(data);

        if (response.status === 200) {
          makeToast.call(
            this,
            "Success",
            "Batch is created successfully",
            "success"
          );

          setTimeout(() => {
            this.$router.replace({ name: "StockMain" });
          }, 1000);
        }
      } catch (e) {
        console.log("e", e);
        makeToast.call(this, "Error", "Error creating batch", "danger");
      }
    },

what can I add to the second component to emit the tab index back to 0 or simply route back to the first index? Thanks so much, two of them are vue components I need to emit some sort of data from the second to the first so it changes the v-model to 0 again as the tabs will keep the tab index when I have v-model in place, I'm just not sure how to pass data between components like this, I need it at the end of the submit method

Mythos

Just emit an event inside function onSubmit:

this.$emit("submitted");

and then handle it in your parent component:

<BatchMain @submitted="tabIndex = 0" />

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Emit value from vue-multiselect.js component to main view

cant emit multiple value to another component Angular

unable to change an attribute value of one component from another component in angular

this.$emit() is not a function while trying to change state in parent component from child in composition API in vue 3

Get value from emit in input field with Vue

How to change to another tab from inside of a tab?

Vue.js - How to emit to parent component on change in data object?

Is it possible to change props value from method in Vue component?

change the value from another component but its not reflecting on the DOM

Change input value in admin-on-rest from another component

how to change value of react Context from another component React

change data value in vue component

catch value on event emit from child component in parent component

How can I emit from component and listen from another one?

Emit event from App.vue and catch in component

How to emit an event from Vue.js Functional component?

Vue 3 - Emit event from child component within a slot

Vue - Unable to Pass Data From Component to Parent with $emit Event

vue2 call a parent function using $emit from component

Vue parent component doesn't recognize emit from child

Can I return a value from a component to change a component state from another?

Change Vue root instance data value on component's button click, then change another component's v-show/v-if

emit value from mounted in child.vue to parent.vue

Change value according to match in another tab in pandas

Change component state from another component

In Vue.js, how can I emit multiple value from child to parent while parent's v-on pass another parameter?

@Output emit value from directive to parent component Angular 4

Vue.js Component emit

Retrun a value from another component?

TOP Ranking

HotTag

Archive