vue.jsで、「事前に指定した特定のhtml」の要素を、「methodsで定義した関数内」で取得する

結論

事前に取得したい要素に対してref属性を設定しておきます。「methodsで定義した関数内」で使用するときはthis.$refs.{refに設定した属性名}で要素を取得できます。

前提

• この記事ではCDN の Vue を使用しています。
• vue@3.3.4を使用しています

サンプルコード

See the Pen vue.jsで、特定のhtmlの要素を取得する by kabuto64425 (@kabuto64425) on CodePen.

補足

もし自分で定義したコンポーネントでもrefを指定することで取得することができます。
ただし、コンポートネントを取得した場合とHTMLを取得した場合は型が異なるようです。
もし、コンポーネント内の要素を取得したい場合、取得したコンポーネントに.$elを使用することで取得できます。

See the Pen vue.jsで、「事前に指定した特定のhtml」の要素を、「methodsで定義した関数内」で取得する(コンポーネント) by kabuto64425 (@kabuto64425) on CodePen.

以上です。