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__()