v-model vue 3 中的参数函数

parameter function in v-model vue 3

你好,我想像这样在 v-model(在 Vue 3 中)中使用一个函数:

<template>
  <input v-model="sayHello('Jhon')">
</template>

<script>
export default{
  methods:{
    sayHello(name){
      return "Hello "+ name
    }
  }
}
</script>

但是代码returns这个错误:

VueCompilerError: v-model value must be a valid JavaScript member expression.

我用谷歌搜索了这个错误,发现你不能在 vue 3 中使用 v-model 中的函数。有人知道这样做的方法吗? 提前致谢。

v-model 不是用于处理输入更改的正确指令。如果要在更改时调用函数,请将 v-on 指令与 input 事件一起使用:

<script setup>
const onChange = e => {
  if (e.target.value === 'Jhon') sayHello()
}
const sayHello = () => alert('hello')
</script>

<template>
  <h3>Type <code>Jhon</code></h3>
  <input @input="onChange" />
</template>

demo