I'm currently working on a project that involves creating a dynamic shipping estimate in a Shopping Cart. The challenge I face is retrieving shipping methods from an API endpoint and making the data reactive to update in real-time based on the selected method.
const shipping_estimate = computed(() => {
// encountering an error here
return localState.shippingMethods.filter(function (el) {
return el.price === shippingMethods[selectedShippingMethod];
});
});
const localState = reactive({
removingCartItem: false,
paymentProcessing: false,
stripe: {},
cardElement: {},
customer: {},
orderError: null,
loading: false,
selectedShippingMethod: null,
shippingMethods: {}
});
onMounted(async () => {
localState.loading = true;
await axios
.get("/api/shipping-method")
.then((response) => {
localState.shippingMethods = response.data.data
localState.loading = false;
})
});
An issue arises with the following error:
TypeError: localState.shippingMethods.filter is not a function
When checking in Vue dev tools, localState.shippingMethods shows as an array instead. How can I effectively filter data stored within a reactive object?