I'm having trouble making the input scroll to .here when its value matches "1". Even though I tried using a button with a handle-click function and it worked.
Please lend me a hand with this issue.
<template>
<button @click="scrollToView">Click to Here</button>
<input type="text" v-model="searchAddress" />
<span v-if="matchAddress">OK</span>
<span class="here" ref="el">Here</span>
</template>
<script setup>
import { ref, computed, watch, nextTick } from "vue";
const searchAddress = ref(null);
const el = ref(null);
const matchAddress = computed(() => {
return searchAddress.value == 1;
});
function scrollToView() {
el.value.scrollIntoView({ behavior: "smooth", block: "center" });
el.value.focus({ preventScroll: true });
}
watch(matchAddress, async (val) => {
console.log(val);
if (val) {
await nextTick();
scrollToView();
}
});
</script>