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.

No regreses un simple objeto

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.

Solución – Acceder a this desde data de Vue

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.