Vue에서의 키다운 및 키업
이건 내 코드야
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="temp">
<div>
<input type="text" v-on:keydown = "storeValue">
<p>{{ value }}</p>
</div>
<div>
<input type="text" v-on:keyup = "storeValue2">
<p>{{ value2 }}</p>
</div>
</div>
<script>
new Vue({
el:'#temp',
data:{
value:'',
value2:''
},
methods:{
storeValue:function(event){
this.value = event.target.value
},
storeValue2:function(event){
this.value2 = event.target.value
}
}
})
</script>
텍스트 상자가 2개 있습니다.텍스트 상자에 값을 입력하면 두 텍스트 상자의 최종 결과는 같아야 한다고 생각합니다.그러나 결과는 다릅니다. 아무 키나 입력하면 값이 "w"로 표시됩니다. (다시 트리거합니다.) 값 2는 즉시 "w"로 표시됩니다.그래서 누가 설명해 줄 수 있나요?
JSFiddle을 확인합니다.
정말 감사합니다.
@블라디슬라브 라디키 플레인 자바스크립트를 써본다.단, 키다운과 키업 동작은 동일합니다.
<html>
<p>This is keyDown</p>
<input type="text" id="myInputKeyDown" onkeydown="keyDownFunc()" >
<p id="demo1"></p>
<p>This is keyUp</p>
<input type="text" id="myInputKeyUp" onkeydown="keyUpFunc()" >
<p id="demo2"></p>
</html>
<script>
function keyDownFunc(){
let temp = document.getElementById("myInputKeyDown").value;
document.getElementById("demo1").innerHTML = temp;
}
function keyUpFunc(){
let temp = document.getElementById("myInputKeyUp").value;
document.getElementById("demo2").innerHTML = temp;
}
</script>
@TechBirds의 답변과 같이 Vue의 양방향 데이터 바인딩 기능을 통해 문제를 쉽게 해결할 수 있습니다.다음은 업데이트 문제를 해결하는 사소한 변경 사항이 포함된 조각입니다.입력 상자 값을 더 제어하고 싶을 때 큰 도움이 되는 워처를 추가했습니다.
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="temp">
<div>
<input type="text" v-model="value1">
<p>{{ value1 }}</p>
</div>
<div>
<input type="text"v-model="value2">
<p>{{ value2 }}</p>
</div>
</div>
<script>
new Vue({
el:'#temp',
data: {
value1:'',
value2:''
},
watch: {
value1: 'storeValue1',
value2: 'storeValue2'
},
methods:{
storeValue1(value) {
// you can play here for more control
},
storeValue2(value) {
// you can play here for more control
}
}
})
</script>12345678
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="temp">
<div>
<input type="text" v-model="value">
<p>{{ value }}</p>
</div>
<div>
<input type="text"v-model="value">
<p>{{ value }}</p>
</div>
</div>
<script>
new Vue({
el:'#temp',
data:{
value:''
},
methods:{
}
})
</script>이것으로 드릴까요?
데이터 표시에 있어서 키 입력이 한 번 뒤처져 보이는 키 다운 이벤트가 문제인 것 같습니다.
VueJs의 라이프 사이클 훅을 확인합니다.데이터 변경 시 DOM 재렌더링이 이루어집니다.이 경우 키다운 타이밍과 재렌더링으로 인해 키다운이1글자 늦어진 것처럼 보입니다.
키 다운이 트리거될 때 storeValue가 트리거됩니다.이 값은 다음과 같습니다.event.target.value아직 갱신되지 않았기 때문에, 로 설정되어 있는 것을 알 수 없습니다.value
Vue와는 아무 상관이 없는 것 같아요.플레인 JS로 시도하면 동일한 결과를 얻을 수 있습니다.이것은 키 다운/키 업의 전형적인 문제입니다.그리고 모두가 입력 이벤트를 대신 사용하는 이유이기도 합니다.
언급URL : https://stackoverflow.com/questions/51128764/keydown-keyup-in-vue
'programing' 카테고리의 다른 글
| std::ios_base:에 대한 정의되지 않은 참조:초기화::Init()' (0) | 2022.07.08 |
|---|---|
| vue.js 및 Auth0을 사용하여 사용자가 이미 인증되어 있는 경우 로그인 페이지를 건너뛰려면 어떻게 해야 합니까? (0) | 2022.07.08 |
| Vuex getters 오디오 업데이트 실시간current Time 상태 (0) | 2022.07.07 |
| vuej 루트 경로 변환 (0) | 2022.07.07 |
| Vuex: 다른 모듈에서 액세스 상태 (0) | 2022.07.07 |