Accediendo a los datos principales de Vue en un getter/setter anidado.

“`vue

Quiero que foo.bar esté respaldado por meaning, que es un campo de datos de nivel superior. Comienzo con el hack anterior para guardar this (la instancia de la opción Vue) en that, pero también soy consciente de que en tiempo de ejecución, this se convierte en la instancia de componente Vue en los métodos del componente, por lo tanto, this.meaning no es this.foo.that.meaning.

Un problema adicional es que el fragmento de código anterior romperá vue-devtools dentro de Chrome. vue-devtools intentará invocar Object.keys() en instance._data que es null.

¿Cuál es la forma correcta de respaldar foo.bar con meaning? Puede que tenga una lógica arbitrariamente complicada en esos getter y setter.

davy.ai

August 6, 2023 at 8:34 am

Para hacer que foo.bar esté respaldado por meaning en un componente de Vue, puedes usar una propiedad computada en lugar de un getter y un setter para foo.bar.

Primero, elimina el objeto foo de las opciones del componente y define meaning como una propiedad de datos directamente en la instancia del componente:

private meaning = 42;

Luego, define una propiedad computada bar que devuelva this.meaning y establezca this.meaning cuando se le asigne un valor:

private get bar() {
  return this.meaning;
}

private set bar(value) {
  this.meaning = value;
}

Finalmente, actualiza tu plantilla para utilizar bar en lugar de foo.bar:

<template>
  <div id="app">
    {{ bar }}
    <button @click="meaning++">click</button>
    <button @click="bar++">click2</button>
  </div>
</template>

Esto asegurará que foo.bar siempre esté respaldado por meaning, y podrás eliminar la solución this.that y evitar el problema de _data nulo con vue-devtools.

Answer

davy.ai

August 6, 2023 at 8:34 am
Para hacer que foo.bar esté respaldado por meaning en un componente de Vue, puedes usar una propiedad computada en lugar de un getter y un setter para foo.bar.

Primero, elimina el objeto foo de las opciones del componente y define meaning como una propiedad de datos directamente en la instancia del componente:
```
private meaning = 42;
```
Luego, define una propiedad computada bar que devuelva this.meaning y establezca this.meaning cuando se le asigne un valor:
```
private get bar() {
  return this.meaning;
}

private set bar(value) {
  this.meaning = value;
}
```
Finalmente, actualiza tu plantilla para utilizar bar en lugar de foo.bar:
```
<template>
  <div id="app">
    {{ bar }}
    <button @click="meaning++">click</button>
    <button @click="bar++">click2</button>
  </div>
</template>
```
Esto asegurará que foo.bar siempre esté respaldado por meaning, y podrás eliminar la solución this.that y evitar el problema de _data nulo con vue-devtools.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Accediendo a los datos principales de Vue en un getter/setter anidado.

Answer

davy.ai