En este post de programación con el framework Vue o Vue.js te mostraré cómo acceder a data
cuando regresamos los datos o el objeto data de nuestro componente.
Esto es necesario porque en ocasiones necesitamos acceder a los datos de Vue desde la definición.
Al final esto no tiene tanto que ver con Vue.js, sino con JavaScript. Pero incluso así en ocasiones podemos olvidar lo que sucede con los objetos anónimos.
La sintaxis corta que vemos en varios lugares es:
data: () => ({
propiedad: "valor",
})
Ya que es una función que va a regresar un objeto. Lo encerramos entre paréntesis para que no se confunda con el cuerpo de la función.
El problema está en que no vamos a poder acceder a los datos desde ese objeto, por ejemplo, al imprimir lo de la línea 4 vamos a tener un undefined
:
data: () => ({
propiedad: "valor",
unaFuncion: () => {
console.log(this.propiedad);
}
})
Ya que this no tiene los datos en el momento de definir la data de nuestro componente.
Así que la solución es definir el objeto dentro de la función, ya no solo regresarlo. Lo definimos, y al final lo regresamos.
Pero dentro del objeto vamos a poder acceder a las propiedades del mismo en tiempo de definición:
data: () => {
const datos = {
propiedad: "valor".
unaFuncion: () => {
console.log(datos.propiedad);
}
};
return datos;
}
Estamos definiendo el objeto en la línea 2. Dentro de este objeto podemos acceder a sí mismo como se observa en la línea 5.
Al final de la función devolvemos el objeto. Y de este modo podemos acceder a la data de Vue desde la definición de la misma.
Si te lo preguntas, a mí me sirvió al estar trabajando con validación de formularios usando Vuetify, ya que al definir las reglas debía comprobar si había una propiedad en true
:
data: () => {
const datos = {
reglas: {
tipoEtiqueta: [
(tipoEtiqueta) => {
if (!datos.lista.incluyeForrado) {
return true;
}
if (!tipoEtiqueta) {
return "Ingresa el tipo de etiqueta";
}
return true;
},
],
nombre: [
(nombre) => {
if (!nombre) {
return "Ingresa el nombre";
}
return true;
},
],
grupo: [
(grupo) => {
if (!grupo) {
return "Ingresa el grupo";
}
return true;
},
],
grado: [
(grado) => {
if (!grado) {
return "Ingresa el grado";
}
return true;
},
],
escuela: [
(escuela) => {
if (!escuela) {
return "Ingresa la escuela";
}
return true;
},
],
contacto: [
(contacto) => {
if (!contacto) {
return "Ingresa el contacto";
}
return true;
},
],
},
lista: {
incluyeForrado: false,
tipoEtiqueta: "",
alumno: {
nombre: "",
grado: "",
grupo: "",
escuela: "",
contacto: "",
},
},
};
return datos;
},
Lo que te comento está en la línea 6. Para terminar te dejo con más tutoriales de Vue.
Encender un foco con un Bot de Telegram es posible usando una tarjeta como la…
El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…
En este post te voy a enseñar a designar una carpeta para imprimir todos los…
En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…
Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…
Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…
Esta web usa cookies.