在显示后将滚动元素移到视图中

Question

我有一个表格，将计算2个值，然后显示结果卡。在填写并提交所有值之前，结果卡将不显示(使用v-if)。

我正在使用Vuetify的UI框架。

这是我尝试的:

<template>
<v-container>
<v-row class="mt-2" justify="center">
<v-col cols="12" sm="8" md="6">
<v-form ref="form" @submit.prevent="onSubmit">
<v-row class="mb-1">
<v-col cols="6">

<v-select
v-model="fighter1"
:items="fighters"
item-text="name"
item-value="id"
return-object
label="Player 1"
:rules="[(v) => !!v || 'Required.']"
/>
</v-col>
<v-col cols="6">

<v-select
v-model="fighter2"
:items="fighters"
item-text="name"
item-value="id"
return-object
label="Player 2"
:rules="[(v) => !!v || 'Required.']"
/>
</v-col>
</v-row>
<!-- This is the submit button -->
<ReadyToFight />
</v-form>
</v-col>
</v-row>
<v-row>
<v-col>
<!-- This is the result card -->
<v-card v-if="result" id="result" class="pb-2">
<h1 class="text-center text-uppercase result-score">{{ result }}</h1>
<h2 class="text-center text-uppercase result-text">
{{ resultText }}
</h2>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script lang="ts">
import { Fighter, fighters } from '@/data/fighters'
import matchupsChart from '@/data/matchups'
import Vue from 'vue'
import { MatchupTypes, toResult } from '~/data/matchupTypes'
type IndexPageType = {
fighters: Fighter[]
fighter1: Fighter | undefined
fighter2: Fighter | undefined
result: MatchupTypes | undefined
}
export default Vue.extend({
name: 'IndexPage',
data(): IndexPageType {
return {
fighters,
fighter1: undefined,
fighter2: undefined,
result: undefined
}
},
computed: {
resultText(): string {
if (this.result) return toResult(this.result)
return `Can't get result`
}
},

// I tried watching the result
// So after the result changed it will scroll
watch: {
result(newResult) {
if (newResult) document.querySelector('#result')?.scrollIntoView()
}
},
methods: {
onSubmit() {
;(this.$refs.form as any).validate()
if (this.fighter1 && this.fighter2) {
this.result = matchupsChart
.get(this.fighter1.id)
?.get(this.fighter2.id) as MatchupTypes
}
}
}
})
</script>

基本上我试着做的是:
看result，如果它变成了真理，那么scrollIntoView()

但这不起作用，因为我认为result首先改变，然后元素被渲染。

有谁知道我应该怎么做吗?

Answer 1

这是因为当监视器被触发时，元素#result还没有在实际的DOM中呈现。您将需要等待this.$nextTick()，以确保DOM确实更新之前，试图滚动元素进入视图，即:

watch: {
result(newResult) {
if (newResult) {
this.$nextTick().then(() => document.querySelector('#result')?.scrollIntoView());
}
}
},

如果你熟悉async/await，你也可以这样做:

watch: {
async result(newResult) {
if (newResult) {
await this.$nextTick();
document.querySelector('#result')?.scrollIntoView();
}
}
},