Vue.jsで同じコンポーネント内のmethods内で複数の関数を実行することは可能でしょうか？？

現在、Vue.jsのコンポーネントの機能を使って開発しています。
そこで、一部可能であれば同じコンポーネント内で複数の関数を呼びたいのですが、技術的に可能かどうかご教授願いたいです。

現在作成中の機能は以下です。
①セレクトボックス１でfunc1を発火させAPI1からリストを取得し、表示
②①の選択地を引数とし、API2を呼び出し、結果をセレクトボックス２に表示←ここまで実装済み
③②の選択値によって別の関数を発火

この中でセレクトボックス１ではAPIからデータを取得するfetchTags関数を既にmethods内で呼び出しているのですが、その他に同じmethods内でセレクトボックス２で特定の要素を選択した際にif分岐で別の関数を設置してAPIを呼ぼうと考えてます。
ですが、methods内に複数の関数を混在させる方法が見つからず、セレクトボックス１と２をそれぞれ別のコンポーネントとして作成する必要性を考えています。もし、同じコンポーネント内で複数の関数の呼び出しが技術的に可能な場合、そのVue.jsの記法などヒントを頂ければ幸いです。

<template>
    <div class="col-sm-2 col-form-label">
        <h3>請選擇客戶名字</h3>
        <v-select v-model="tableSelected" :on-change="fetchTags()" :options="tables">
            <option v-for="table in tables" :key='table.id'>{{ table }}</option>
        </v-select>

        <ul v-if="errors && errors.length">
            <li v-for="error of errors" :key='error.id'>
                {{error.message}}
            </li>
        </ul>
        <h2>請選擇標籤</h2>
        <v-select v-model="tagSelected" :options="tags" multiple>
            <option v-for="tag in tags" :key='tag.id'>{{ tag }}</option>
        </v-select>
        
        <ul v-if="errors && errors.length">
            <li v-for="error of errors" :key='error.id'>
                {{error.message}}
            </li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs';

export default {
  data () {
    return {
      tables: '',
      tableSelected: '',
      tags: '',
      tagSelected: ''
    }
  },
  created () {
    axios.get('API1').then(response => {
      this.tables = response.data
    })
      .catch(e => {
        this.errors.push(e)
      })
  },        
  methods: {
    fetchTags: function () {
      axios.get('API2', {
        params: {
          tableName: this.tableSelected
        },
        paramsSerializer: (params) => {
          return qs.stringify(params, { arrayFormat: 'repeat' });
        }
      }).then(response => {
        this.tags = response.data
      })
        .catch(e => {
          this.errors.push(e)
        })
    }
  }
}
</script>

Twoshi

2021/02/05 09:19

ご質問拝見いたしました。セレクトボックス1というのは以下の記述箇所になりますでしょうか？(ソース上は下方にあるv-select) <v-select v-model="tagSelected" :options="tags" multiple>

amaturePy

2021/02/05 09:31

すみません。分かりにくかったと思います。セレクトボックス１は<v-select v-model="tableSelected" :on-change="fetchTags()" :options="tables"> こちらのテーブル名を取得している物になります。

amaturePy

2021/02/05 09:32

見て頂いてる<v-select v-model="tagSelected" :options="tags" multiple>の方はセレクトボックス２と称していて、こちらにで関数を発火させたいと思っています。

Twoshi

2021/02/05 09:34

ご回答いただきありがとうございます！セレクトボックス2にセレクトボックス1と同じようにon-changeを付与して、セレクトボックス1とは別な関数を呼び出したいという認識でよろしいでしょうか？

amaturePy

2021/02/05 09:34

再度日本語チェックします

amaturePy

2021/02/05 09:40

すみません。前提として１コンポーネント１methodsだと思っておりまして、既にmethodsはfetchTagsの処理が入っていり、セレクトボックス２の処理を加えられるかどうか悩んでおります。

amaturePy

2021/02/05 09:57

すみません！methods内で複数の処理を実行できるかがより適切な内容なので、質問文を訂正いたしました！

行動規範の内容に同意します

回答1件

ベストアンサー

コンポーネント内の関数の数に制約は無いはずです。
コンポーネント内に複数関数を作成する場合は「,」で区切ることで作ることができます。

以下例となります。
ご参考になれば幸いです。

template部分

Vue
1    <v-select v-model="tagSelected" :on-change="func1()" :options="tags" multiple>
2      <option v-for="tag in tags" :key="tag.id">{{ tag }}</option>
3    </v-select>

methods部分

Vue
1methods: {
2    fetchTags: function() {
3      // 省略
4    },
5    func1: function() {
6      this.func2(); // thisを使ってmethods内の他関数を呼び出すこともできます。
7      /**処理 */
8    },
9    func2: function() {
10      /** 処理 */
11    }
12  }