TabIndex vue 从另一个组件发出更改选项卡值

Question

我需要在成功提交表单后从另一个组件发出 tabIndex 值，以便它可以返回到第一个索引，我该如何实现？

这是我的组件：

<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,
    };
  },

它有带有 v-model 索引的选项卡，现在在同一个目录或文件夹中我有另一个组件被导入到上面的名为 BatchMain 的组件中，它位于第二个选项卡中该组件具有提交功能：

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");
      }
    },

我可以向第二个组件添加什么以将选项卡索引发回 0 或简单地路由回第一个索引？非常感谢，其中两个是 vue 组件我需要从第二个到第一个发出某种数据所以它再次将 v-model 更改为 0 因为当我有 v-model 时选项卡将保留选项卡索引，我只是不确定如何像这样在组件之间传递数据，我在提交方法的末尾需要它

Answer 1

只需在函数内发出一个事件 onSubmit:

this.$emit("submitted");

然后在你的父组件中处理：

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

TabIndex vue 从另一个组件发出更改选项卡值

TabIndex vue emit change tab value from another component

javascript

database

forms

components

vue.js