Vue 3 with composition API not assigning res to local variable

I have this script in a Vue 3 component. The console.log actually shows 9 orders, but when I add {{orders}} to the page, all I see is an empty array. That's also what I see in the setup dropdown of the Vue devtools

<script setup>
import axiosInstance from "../../helpers/axios";
import {onMounted} from "vue";

onMounted(() => {
    getOrders()
})

let orders = [];

async function getOrders() {
    try {
        const res = await axiosInstance.get("/api/orders")
        if(res.status === 200) {
            orders = res.data
        }
        console.log(orders)
    } catch (error) {
        console.log(error)
    }
}
</script>

I also tried

...
import {ref} from "vue";
let orders = ref([]);
...

mediabloke

3 years ago

Level 1

I ended up using ref. What I was missing was instead of orders = res.data I needed to use orders.value = res.data

darisnstlex

3 years ago

Level 1

you could use reactive

const state = reactive({
  orders: [],
})

// update orders
state.orders = res.data

1 like

Please or to participate in this conversation.