es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

función de parámetro en v-model de Vue 3

17 Jun, 2023 Programación

Hola, me gustaría poder usar una función en un v-model (en Vue 3) de esta manera:

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

<script>
export default{
  methods:{
    sayHello(nombre){
      return "¡Hola "+ nombre +"!"
    }
  }
}
</script>

Pero el código devuelve el siguiente error:

VueCompilerError: el valor de v-model debe ser una expresión válida de JavaScript.

He buscado en Google y he encontrado que no se permite utilizar funciones en v-model en Vue 3. ¿Alguien sabe cómo hacerlo de todas formas?
¡Gracias de antemano!

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Según la documentación de Vue 3, no es posible utilizar funciones en v-model. La razón de esto es que v-model está destinado a ser usado con una propiedad de datos para proporcionar una vinculación bidireccional entre el elemento de entrada y la propiedad de datos.

    Sin embargo, existen soluciones alternativas para lograr una funcionalidad similar. Una forma es utilizar una propiedad computada que devuelva el valor de la función y vincularlo al elemento de entrada usando v-model. Aquí hay un ejemplo:

    <template>
  <input v-model="computedName">
</template>

<script>
export default{
  methods:{
    sayHello(name){
      return "Hola "+ name
    }
  },
  computed: {
    computedName() {
      return this.sayHello('Juan');
    }
  }
}
</script>

    En este ejemplo, definimos una propiedad computada llamada computedName que devuelve el valor de la función sayHello con Juan como argumento. Luego, vinculamos esta propiedad computada al elemento de entrada utilizando v-model.

    De esta manera, cada vez que cambie el valor de entrada, la propiedad computedName se actualizará y se llamará de nuevo a la función sayHello con el valor actualizado.

    ¡Espero que esto ayude! Avísame si tienes alguna otra pregunta.

Comments are closed.