Vue.jsでイベントごとにデータを切り替える方法を知りたい

実現したいこと

タブを切り替えた際にデータとして保持している項目も切り替えたいです。

発生している問題・分からないこと

標準項目とその他項目のそれぞれタブがあり、それぞれデータが割り当てられています。

ただ、タブを切り替えた際にデータの内容を切り替える方法がわからず、有識者の方にお伺いできればと思います。

該当のソースコード

Vue.js
1            <el-tabs v-model="itemActiveTab" type="card">
2              <el-tab-pane label="項目1" name="項目1" key="項目1">
3                <template #label>
4                  <div style="width: 200px; text-align: center">
5                    {{ $t("mm.operational_status.select_params.items") }}
6                  </div>
7                </template>
8              </el-tab-pane>
9              <el-tab-pane label="項目2" name="項目2" key="項目2">
10                <template #label>
11                  <div style="width: 200px; text-align: center">
12                    {{ $t("mm.operational_status.select_params.other_items") }}
13                  </div>
14                </template>
15              </el-tab-pane>
16            </el-tabs>
17・・・・・・
18import CustomDialog from "@/components/CustomDialog";
19import {
20  // getAssetGraphItemData,
21  // addTrendGraphData,
22  getGraphMasterData,
23  updateGraphMasterData,
24} from "@/resources/services/support";
25import _ from "lodash";
26import { ElMessage } from "@/resources/utils/message";
27import { mapGetters } from "vuex";
28
29export default {
30  name: "asset-status-line-select-params",
31  components: {
32    CustomDialog,
33  },
34  props: { dialog: Object, majorItemMap: Object },
35  data() {
36    return {
37      subActiveTab: "",
38      activeTab: 10,
39      itemActiveTab: "項目1",
40      tabs: [
41        {
42          name: "mm.operational_status.select_params.default",
43          type: 10,
44          data: [],
45        },
46        {
47          name: "mm.operational_status.select_params.self",
48          type: 20,
49          data: [],
50        },
51        {
52          name: "mm.operational_status.select_params.share",
53          type: 30,
54          data: [],
55        },
56      ],
57      list: {
58        loading: false,
59        data: [],
60        spanNumber: [], // span table column
61      },
62      deleteDialog: {
63        visible: false,
64        title: "mm.operational_status.select_params.delete_dialog.title",
65      },
66      basicGraphList: [],
67      changedKeys: [],
68      disableAdd: false,
69      isAdd: false,
70      isInit: false,
71    };
72  },
73  computed: {
74    showFooter() {
75      return (
76        [...this.tabs[0].data, ...this.tabs[1].data, ...this.tabs[2].data]
77          .length > 0
78      );
79    },
80    ...mapGetters("user", ["userInfo"]),
81    currentData() {
82      return this.tabs
83        .find((item) => item.type === this.activeTab)
84        ?.data?.find(
85          (item) => item.trendGraphTemplateMasterUniqueKey === this.subActiveTab
86        );
87    },
88    dialogInner: {
89      get() {
90        return this.dialog;
91      },
92      set(val) {
93        this.$emit("update:dialog", val);
94      },
95    },
96    checkedList() {
97      const data = this.currentData.listData.data;
98      return data?.filter((v) => v.isCheck) || [];
99    },
100    majorItemGroup() {
101      return _.groupBy(this.checkedList, (v) => v.majorItem);
102    },
103    majorItemLength() {
104      return Object.keys(this.majorItemGroup).length;
105    },
106    minorItemLength() {
107      const group = _.groupBy(this.checkedList, (v) => v.minorItem);
108      return Object.keys(group).length;
109    },
110  },

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

ChatGPTなどに聞いて試してみましたがJavaで保有している内容は実現できなかったです。

補足

特になし

juner

2024/11/01 04:30

そのコンポーネントは element plus の要素でしょうか？（どのカスタム要素なのかライブラリ名等も一緒に質問文に入れてほしいです。 https://element-plus.org/en-US/component/tabs

juner

2024/11/01 07:07

> タブを切り替えた際にデータの内容を切り替える方法がわからずどこに於けるデータの内容を切り替える方法なのか気になります。気軽にするのであれば template 内で v-for してタブを作成するとかするならその item は切り替わるとは思いますが…… どこに於ける何を切り替えるのでしょうか……？それ以外なら現在の選択している値 itemActiveTab を元に切り替えればいいと思います。