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
CodePudding user response:
Just emit an event inside function onSubmit
:
this.$emit("submitted");
and then handle it in your parent component:
<BatchMain @submitted="tabIndex = 0" />