2

Estoy realizando el consumo de una api realizada en Go y por medio de Vue 3, la obtención de datos lo hace de forma correcta, entonces los datos que obtengo los ingreso en un método reactive para poder trabajar con objetos y los envio a otro componente por medio de props, es en ese momento donde me genera un error el cual no he podido solucionar y es que cuando obtengo los props lo paso por toRef para no perder la reactividad, y la informacion funciona sin problemas, el problema empieza a suceder es cuando actualizo la pagina pues la informacion que tengo se pierda pero solo cuando intento obtener el value de toRef:
Este es mi componente que obtiene los datos de la api:

export default {
  components: { EditProject },
  setup() {
    const route = useRoute();
    const project = reactive({});

    onMounted(() => {
      nextTick(() => {
        fetch(`http://localhost:8000/api/v1/projects/${route.params.id}`)
          .then((res) => res.json())
          .catch((error) => console.error(error))
          .then((data) => {
            Object.assign(project, data);
          });
      });
    });

    return {
      project,
    };
  },
};

Y este es el metodo que obtiene ese objeto por medio de props:

export default {
  props: {
    project: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const content = toRef(props, 'project');

    const name = toRef(content.value, 'name');
    const description = toRef(content.value, 'description');
    const endProject = toRef(content.value, 'endProject');
    const user = toRef(content.value, 'user');
    const users = ref();

    ...

    return {
      name,
      description,
      endProject,
      user,
      users,
      editProject,
    };
  },

Este es el código de muestra para mostrar por consola los datos:

const end_date = toRefs(props.project, 'end_date');
console.log(end_date);

Lo que me muestra por consola es lo siguiente:

created_at: ObjectRefImpl {_object: Proxy, _key: "created_at", __v_isRef: true}
description: ObjectRefImpl {_object: Proxy, _key: "description", __v_isRef: true}
end_date: ObjectRefImpl
__v_isRef: true
_key: "end_date"
_object: Proxy {id_project: 3, name: "gbhnju", description: "derftgyh", start_date: "2021-08-06T00:00:00Z", end_date: "2021-08-17T00:00:00Z", …}
value: "2021-08-17T00:00:00Z"
[[Prototype]]: Object
id_project: ObjectRefImpl {_object: Proxy, _key: "id_project", __v_isRef: true}
name: ObjectRefImpl {_object: Proxy, _key: "name", __v_isRef: true}
progress: ObjectRefImpl {_object: Proxy, _key: "progress", __v_isRef: true}
project_state: ObjectRefImpl {_object: Proxy, _key: "project_state", __v_isRef: true}
start_date: ObjectRefImpl {_object: Proxy, _key: "start_date", __v_isRef: true}
updated_at: ObjectRefImpl {_object: Proxy, _key: "updated_at", __v_isRef: true}
user: ObjectRefImpl {_object: Proxy, _key: "user", __v_isRef: true}
user_creation: ObjectRefImpl {_object: Proxy, _key: "user_creation", __v_isRef: true}

Pero cuando quiero mostrar por consola el value del toRef me genera un undefined, o si actualizo la pagina el obtejo es como si se perdiera:

console.log(end_date.value);

Este es lo que me muestra cuando actualizo la pagina:

[[Prototype]]: Object
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
2
  • Puedes compartir el error que te sale? Commented el 9 ago. 2021 a las 16:40
  • @BrayanMartínezSantana intente ser lo mas especifico en el problema Commented el 9 ago. 2021 a las 21:22

1 respuesta 1

1

Flujo del problema

  • 0s El componente padre hace una llamada a tu api (digamos que tarda 1seg)
  • 0.1s El componente padre le pasa project (es {} a este punto) al componente hijo.
  • 0.2s El componente hijo recibe a project con valor {} y guarda en name el valor de toRef(content.value, 'name') pero project.name es undefined, así que se crea una referencia a ello.
  • 0.3s El componente hijo muestra undefined en el template
  • 1s El componente padre termina la llamada, actualiza project y se manda la información al componente hijo pero el hijo solo actualiza prop.project pero no a name (pues en 0.2s ni existía el atributo).
  • Tu componente hijo sigue diciendo undefined.

Solución

En el componente padre:

// En vez de hacer:
const project = reactive({});

// haz lo siguiente:
const project = reactive({
  name: "",
  user: {},
  // ...
});

En el componente hijo:

setup(props) {
  const { project } = toRefs(props);
  const {
    name,
    user,
    // ...
  } = toRefs(project.value);
  
  // usas tus variables en lo que necesites ...
  
  return { name, user };
}

No es la única solución y puedes usar computed o watch pero creo que sería más trabajo del necesario.

Edit Usando una API en Vue

3
  • Hola muchas gracias por tu respuesta, pero es mismo problema persiste, además de ingresar dato por dato no seria mejor utilizar ref en vez de reactive? Commented el 10 ago. 2021 a las 20:09
  • Pues ref manda a llamar a reactive, así que puedes seguir usándolo pero cambia un poco la forma en la que trabajas con objetos si usas ref. No sé que más pueda estar mal, puedes compartir un gif, o un codesandox para que pueda mejorar. :C Commented el 10 ago. 2021 a las 22:43
  • 1
    disculpa probe mal tu respuesta ahora si la probe bien, funciona muy bien Commented el 11 ago. 2021 a las 0:46

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.