So I am learning vue 3 with composition API and I want to change the .value property of a variable 'filteredProjects' from axios response like so...
const filteredProjects = ref(null)
onMounted(async () => {
await api.get("/project").then(response => filteredProjects.value = response.data);
})
console.log(filteredProjects.value)
I tried console.log(filteredProjects.value) but it returned null, so I checked out the variable without .value property console.log(filteredProjects) and find out that the response data from API is being set on the _value property instead of .value. This is the console result
RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: null, _value: null}
dep: Set(1) {ReactiveEffect}
__v_isRef: true
__v_isShallow: false
_rawValue: {data: Array(13), message: 'successfully get data'}
_value: Proxy {data: Array(13), message: 'successfully get data'}
value: (...)
[[Prototype]]: Object
In Vue.js, when you use a reactive variable, such as those created with ref or reactive , the library adds an additional property called _value to the reactive variable. This is done to avoid conflicts with the name "value" itself and to ensure that the variable is reactive correctly.