0

Estoy aprendiendo Laravel y VueJs pero en este sencillo ejemplo me esta devolviendo un error la consola:

[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.

El codigo es este:

<template>
    <h1>Mensaje: {{ message }}</h1>
</template>

<script>
export default {
    data(){
        return {
            message: 'Hola mundo'
        }
    },
}
</script>

Porque me devuelve este error si este devolviendo data como un objeto? Gracias

1
  • Hola, estoy tratando de reproducir esto, pero no me tira ningún warning. Lo probé en un proyecto laravel y también hice un sandbox pero tu código funciona perfectamente. ¿Es posible que estés cargando otro componente además del que muestras? Commented el 26 oct. 2020 a las 22:24

1 respuesta 1

2

Como lo indica el error: La opción "datos" debe ser una función, Entonces, al definir un componente, data debe declararse como una función que devuelve el objeto de datos inicial.

<template>
    <h1>Mensaje: {{ message }}</h1>
</template>

<script>
export default {
    data:function(){ 
        return {
            message: 'Hola mundo'
        }
    },
}
</script>

Documentación oficial sobre su duda y el por qué de la misma

5
  • 1
    No existen problemas con las arrow functions?, recuerdo haber leido alguna sección de la doc que indica que no se use ya que el scope que dan ambas es distinto y el acceso a las propiedades del objeto data pudieran dar undefined, es duda
    – user128299
    Commented el 26 oct. 2020 a las 17:32
  • Siii, al declarar métodos (props ejemplo) de Vue no use arrow function, debido a que estas enlazan el contexto principal por this y marcara indefinido. Lo mejor seria ES5 con data:function(){}
    – Daniel
    Commented el 26 oct. 2020 a las 18:32
  • Pues haciendolo asi sigue arrojando el mismo error
    – Alberto
    Commented el 27 oct. 2020 a las 11:32
  • @Alberto me gustaría tomar el comentario de @ porloscerros Ψ y preguntarle lo mismo. Ya que si tomo el ejemplo de respuesta probando en codeSanbox funciona correctamente
    – Daniel
    Commented el 28 oct. 2020 a las 15:50
  • Gracias, me ayudo bastante.
    – Ivandez
    Commented el 9 nov. 2021 a las 2:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.