0
774
ViewsVue.js: la propiedad o el método no están definidos en la instancia, pero se hace referencia durante el procesamiento
tengo
<template> <div class="dashboard"> <Navbar /> <MainPanel :title="Dashboard" :icon="dasboard" /> </div> </template> <script> import MainPanel from '../../components/MainPanel' import Navbar from '../../components/Navbar' export default { name: 'Dashboard', components: { Navbar, MainPanel } } </script>Como puede ver, estoy tratando de reutilizar mi componente MainPanel.
Panel principal
<template> <v-container fluid class="my-5"> <v-row> <v-flex col-xs-12> <v-card elevation="2" class="pb-15"> <v-flex xs12 class="text-center"> <v-card-title> <v-btn dark text color="black"> <v-icon right class="mr-2">{{ icon }}</v-icon> <span>{{ title }}</span> </v-btn> </v-card-title> </v-flex> </v-card> </v-flex> </v-row> </v-container> </template> <script> export default { name: 'MainPanel', props: { icon: String, title: String }, data() { return { icon: '', title: '' } } } </script> <style lang=""></style>En la consola, seguí recibiendo este error.
[Advertencia de Vue]: la propiedad o el método "dasboard" no está definido en la instancia, pero se hace referencia durante el procesamiento. Asegúrese de que esta propiedad sea reactiva, ya sea en la opción de datos o para componentes basados en clases, inicializando la propiedad.
¿Puede alguien por favor darme algunos consejos?
3 answers
Answer question0
Parece un error muy simple:
:title="Dashboard" en Vue usando una columna ( : para anteponer un accesorio o un atributo en un componente, usará una propiedad definida o en accesorios o en datos. Mientras que si usa title="dashboard" en realidad pasará una cadena, eso es lo que quiere
0
Usar el signo vinculante : cuando se usan valores sin procesar en accesorios, significa que los valores deben estar presentes como propiedades dentro de las opciones del script:
<MainPanel title="Dashboard" icon="dasboard" />0
De acuerdo con la guía oficial de Vue2 , los props pueden simplemente obtener valor del atributo o pasar por v-bind para lograr una respuesta.
Entonces, en este caso, es posible que desee usar el title en su lugar :title .
<MainPanel title="Dashboard" icon="dasboard" /> Si desea que el título de MainPanel se pueda cambiar de manera receptiva, puede bloquear una variable en data y pasar por v-bind :
<MainPanel :title="varaibleForTitle" :icon="varaibleForIcon" /> Por cierto, puede pasar un valor de cadena por v-bind , aunque no entiendo por qué alguien querría hacer esto.
<MainPanel :title="'MainPanel'" :icon="'dasboard'" />Salud.