私は、vue コンポーネントで document.getElementById().scrollIntoView() を使用して Jump-To-Div のような機能を使用しようとしています。
コンポーネント内で関数を呼び出すと、機能は正常に動作します。ただし、ref を使用して親コンポーネントから関数を呼び出そうとすると、要素はスクロールされずに表示されません。
親コンポーネントはページであり、子コンポーネントはページ内のタブです。
これは子Vueコンポーネントです親コンポーネント内:-
<el-tab-pane label="Solution Details" name="Solution Details" v-loading="loading">
<solution-details
:formData="response"
ref="solutionDetails"
@done="$emit('done')">
</solution-details>
</el-tab-pane>
SolutionDetails.Vue子コンポーネントにはref="solutionDetails"があります。このメソッドを呼び出します親コンポーネント内子コンポーネントのrefを使用します。
handleClick(command) {
this.activeTab = 'Solution Details';
this.$refs.solutionDetails.showCurrent(command);
},
子コンポーネントには、引数「command」に対して実行されるshowCurrent関数があります。これはその関数です。子コンポーネント内。
methods: {
showCurrent(index) {
document.getElementById(index).scrollIntoView();
},
ご覧のとおり、showCurrent はページ内の要素を取得し、スクロールして表示する必要があります。SolutionDetails.vue がアクティブなタブである場合、対応する要素は問題なくスクロールして表示されます。ただし、他のタブから親関数を実行している場合は、this.activeTab = 'Solution Details';アクティブ タブが SolutionDetails.vue に変わりますが、要求された要素はスクロールして表示されません。
他のタブがアクティブタブのときに要素までスクロールするにはどうすればよいでしょうか?
ベストアンサー1
実際には、コンポーネント内の要素を参照する必要があります。たとえば次のようになります。
this.$refs.[ref name here].$el.scrollIntoView({ behavior: 'smooth' });