input标签v-model属性失效
问题:input标签v-model属性失效,清空ans, 但是ui上依然显示。 html和js代码
<input @input="onInputChange" class="ans" v-model="ans" auto-focus><input>
const onInputChange = () => {
if (ans.value === ques.value) {
endTime = Date.now();
ans.value = ""; // 清空了值,但是ui上依然显示
typemasterCharp[ques.value]
ques.value = "A";
startTime = Date.now();
}
};
解决方案: 使用nextTike, 注意要import
<script setup>
import {
ref,
computed,
onMounted,
onUnmounted,
nextTick
} from "vue";
const onInputChange = () => {
if (ans.value === ques.value) {
endTime = Date.now();
nextTick(() => {
ans.value = ""; // 再次确保 UI 更新
console.log("已清空");
});
typemasterCharp[ques.value]
ques.value = "A";
startTime = Date.now();
}
};
<script>
疑惑: 很奇怪的一点是,nextTick()前边再加一句ans.value=""就又失效了,真离谱,如下
const onInputChange = () => {
if (ans.value === ques.value) {
endTime = Date.now();
// console.log(endTime - startTime);
// console.log(ans.value);
ans.value = "";
nextTick(() => {
ans.value = ""; // 再次确保 UI 更新
console.log("已清空");
});
// console.log("已清空");
// console.log(ans.value);
typemasterCharp[ques.value]
ques.value = "A";
startTime = Date.now();
}
};