vue3 keydown事件无法修改数据

我在子组件中定义了一个事件
$emit('enter', value)
父组件使用时能够触发处理函数,能够执行message.push(),不能执行content.value=''
如果使用click事件又可以

<template>
  <VInput v-model="content" @enter="handleSend">
  <button @click="handleSend">Push</button>
</template>

<script setup lang="ts">
  import VInput from './VInput.vue'
  
  const content = ref('123')
  const message = ref([])
  // 用onkeydown和click调用结果不同
  const handleSend = () => {
    message.push(content.value)
    content.value = '' // 无效
    console.log(content) // .value = '123'
    console.log(content.value) // ''
  }
</script>

VInput.vue

<template>
    <div class="v-input">
        <input type="text" v-model="state.value" @keydown="handleKeydown" @keyup="handleKeyup">
    </div>
</template>

<script setup lang="ts">
    import { reactive, watch } from 'vue'

    interface VInputProps {
        modelValue: string
    }
    const props = defineProps<VInputProps>()

    const state = reactive({
        keys: new Set(),
        value: props.modelValue
    })

    const $emit = defineEmits([
        'update:modelValue',
        'enter'
    ])

    watch(state, ({ value }) => {
        $emit('update:modelValue', value)
    })
    watch(props, ({ modelValue }) => {
        state.value = modelValue
    })

    const handleKeydown = (e: KeyboardEvent) => {
        state.keys.add(e.code)// 删除这句和keyup就正常了
        // console.log(state.keys)
        if(e.code === 'Enter') {
            $emit('enter', e)
        }
    }
    const handleKeyup = (e: KeyboardEvent) => {
        state.keys.delete(e.code)// 删除这句只有第一次按下无效
    }
</script>
回复
阅读 1.2k
2 个回答

你调用的有问题。你定义的是 keydown,你触发 @keydown 就可以了。你的 @onkeydown 调用的是dom原生的方法,不是你定义的方法。

先来分析下,message.push都执行了,又没有报错,也没有条件语句,content.value=''怎么可能执行不了,他肯定是执行了,但是你又没有看到效果,这说明他置为空之后又被修改了。

为什么会被修改,因为input的v-model绑定的是input事件,而input事件比keydown事件后执行,所以你在keydown中修改的数据又被input修改回去了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题