I've installed Vue 3 and want to populate a reactive object with fetch from a JSON API.
My component looks like below. I don't get any errors but I don't get any results either.
<template>
<div>
{{ state.test.total }}
</div>
</template>
<script>
import { reactive } from "vue";
export default {
setup() {
const state = reactive({
test: null,
});
state.test = async () => {
return await fetch("https://api.npms.io/v2/search?q=vue");
};
return {
state,
};
},
};
</script>
I expected to get a number on the screen because that's what's in total
in the JSON file.
On state.test
If I only output state.test
I get the output below.
function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }
Any idea how I can get around it?