vue3 keydown事件无法修改数据

Question

我在子组件中定义了一个事件
$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>

Answer 1

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

Answer 2

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

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