Nuxt.jsでソースコードからボタンを押す方法を教えていただきたいです。

Question

実現したいこと

Nuxt.jsでソースコードからボタンを押す方法を教えていただきたいです。

• Nuxt.jsでソースコードからボタンを押す

前提

Nuxt.jsの学習をしています。

<template>
  <div>
    <input type="button" value="my-btn" @click="onClick"/>
  </div>
</template>

↑こういう my-btn を定義して、クリックした時に onClick が呼ばれるのは理解できました。
次に、ソースコードの別の箇所から my-btn を押す方法が知りたいです。

試したこと

  mounted() {
    console.log('mounted')
    console.dir(this)
  }

ページが読み込まれた時に呼ばれる mounted で this を調べると、 VueComponent が見れるのですが、ここから my-btn を特定してボタンを押したようにすることはできないのでしょうか。

補足情報（FW/ツールのバージョンなど）

OS は Ubuntu 22.04 です。
package.json のライブラリはこうなっています。

  "dependencies": {
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },

よろしくお願い致します。

Answer 1

以下は、mountedフックからonClick関数を実行して<input type="button">要素をクリックする方法の例です。

<template>
  <div>
    <input ref="myButton" type="button" value="my-btn" @click="onClick"/>
  </div>
</template>
<script>
export default {
  mounted() {
    const myButton = this.$refs.myButton;
    myButton.click();
  },
  methods: {
    onClick() {
      console.log('ボタンがクリックされました。');
    }
  }
};
</script>

上記の例では、テンプレート内で<input type="button">要素を定義しています。そして、mountedフック内でその要素を取得し、取得した要素に対してclickイベントをトリガーすることで、ボタンをクリックした状態を再現しています。

また、ボタンがクリックされた場合の処理は、methods内で定義したonClick関数を呼び出すことで実現できます。

Comments

[newbie-udon]

ありがとうございます！！そのまま動かすことができました！
貴重なお時間をいただいて、完全なコードとご丁寧な解説を示して下さり、本当にありがとうございます。m(_ _)m
refを知って、このような場面で使えることを理解できました！