[解決済み] Vue.jsでコンポーネント内の要素を取得する

質問

コンポーネントがありますが、その中の1つの要素を選択するにはどうすればよいですか？

このコンポーネントのテンプレート内にある入力を取得しようとしているのですが。

複数のコンポーネントが存在する可能性があるので querySelector は、そのコンポーネントの現在のインスタンスのみをパースする必要があります。

Vue.component('somecomponent', {
    template: '#somecomponent',
    props: [...],

   ...

    created: function() {
        somevariablehere.querySelector('input').focus();
    }
});

解決方法は？

アクセスしようとしている内容によって、いくつかの選択肢があります。

• Vue.jsコンポーネントの子コンポーネントへのアクセスは this.$children

• テンプレート内の特定のDOM要素にラベルを付けるには ref="uniqueName" で参照し、後で this.$refs.uniqueName
  
  (ただし、コンポーネント/アプリに 実装完了 を実行し、初期レンダリングを行う)

• 要素にラベルを付けることができない場合、CSS セレクタを使用して DOM に子要素を問い合わせるには、次のようにします。 this.$el.querySelector('.myClass > .childElement')
  
  (上記と同様に、コンポーネント/アプリに 実装完了 )

また、単純に console.log(this) コンポーネントの内部で、Vueコンポーネントインスタンスのすべてのプロパティが表示されます。