반응형
Vue.js - 모델이 변경을 거부하는 경우 입력값 복원
사용자가 소수점 뒤에 최대 3자리 숫자를 입력할 수 있는 텍스트 입력이 있습니다.
<v-text-field type="text" :value="num" @change="changeNum($event)" />
<p>{{ num }}</p>
...
export default {
data: () => ({
num: 0
}),
methods: {
changeNum(e) {
let v = parseFloat(e);
if (!isNaN(v)) {
this.num = parseFloat(v.toFixed(3));
}
}
}
};
입력했을 경우'123.456',그리고나서num = 123.456텍스트를 첨부하면'789', 입력에는 다음이 포함됩니다.123.456789그렇지만num = 123.456따라서 사용자는 변경이 적용되었다고 생각할 수 있지만 그렇지 않습니다.
이 경우 입력을 강제로 업데이트하려면 어떻게 해야 합니까?changeNum실패했을까요?
를 사용하여 사용 사례를 달성할 수 있습니다.v-model.lazy텍스트 필드를 떠난 후 데이터를 변경합니다.watch다른 곳에 초점을 맞춘 후 입력된 값을 제어할 수 있는 이전 및 새 값을 저장하는 속성입니다.
new Vue({
el: '#app',
data: () => ({
num: 0
}),
watch: {
num(newv, oldv) {
let v = parseFloat(newv);
if (!isNaN(v)) {
this.num = parseFloat(v.toFixed(3));
} else {
this.num = oldv;
}
}
}
})#app {
padding: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vue.delete">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.lazy="num" />
<p>out: {{ num }}</p>
</div>
</body>@change초점을 다른 것으로 바꿀 때까지 발사되지 않습니다.입력 시 입력을 평가하려면@input대신.키를 누를 때마다 발사됩니다.
또한 리셋할 수 있도록 마지막 값을 추적합니다.
<v-text-field type="text" :value="num" @input="changeNum($event)" />
<p>{{ num }}</p>
...
export default {
data: () => ({
num: 0,
lastNum: 0
}),
methods: {
changeNum(e) {
let v = parseFloat(e);
if (!isNaN(v)) {
this.num = parseFloat(v.toFixed(3));
this.lastNum = this.num;
}
else {
this.num = this.lastNum;
}
}
}
};
그런 것 같아요$forceUpdate당신의 문제를 해결해야 합니다.
methods: {
changeNum(e) {
let v = parseFloat(e);
if (!isNaN(v)) {
this.num = parseFloat(v.toFixed(3));
this.$forceUpdate();
}
}
}
언급URL : https://stackoverflow.com/questions/53134629/vue-js-restore-input-value-if-model-rejects-changes
반응형
'programing' 카테고리의 다른 글
| Vue CLI 3으로 Vuetify를 설치한 후 컴파일하지 못함 (0) | 2022.06.21 |
|---|---|
| 모키토:메서드를 감시하는 것은 원래 메서드를 호출하는 것입니다. (0) | 2022.06.21 |
| C 프로그래밍 언어는 객체 지향입니까? (0) | 2022.06.20 |
| AssertjUnit의 문자열에 포함됨 (0) | 2022.06.20 |
| 다차원 어레이, Vuex 및 돌연변이 (0) | 2022.06.20 |