I've got a basic client-side rendered vue app that fetches a json array from an API endpoint and renders data from each array item as a list item in an ordered list.
The data renders as expected when I'm developing locally, using parcel index.pug to spin up my local dev environment. Here's a screenshot of the expected ordered list as shown in my local dev environment at localhost:1234:
However, the data does not render as expected when I build for production (using parcel build index.pug). Here's a screenshot of the unexpected behavior in production mode (which you can see live online at https://errands.netlify.com/):
Notice that the production version knows the fetched API data is an array with a length of 6 (because it renders out 6 empty <li>s), but for some reason the production version does not know the data inside each array object.
The full source code for this app is here, https://github.com/brianzelip/groceries-vue.
The main relevant code (the axios call to the API, which updates the vuex store, then renders out the ordered list) lives in TheGroceryForm.vue, which is also included here:
<template>
<form action="/submit" method="POST">
<ol class="list-reset border rounded">
<li class="item" v-for="item in allGroceryItems" v-bind:key="item._id">
<GroceryFormItemEditLink/>
<GroceryFormItemCheckboxInput :slug="item.slug"/>
<GroceryFormItemCheckboxLabel :slug="item.slug" :name="item.name"/>
<GroceryFormItemQtySelector :slug="item.slug"/>
<GroceryFormItemStoresSelector
:stores="item.stores"
:slug="item.slug"
:defaultStore="item.defaultStore"/>
</li>
</ol>
</form>
</template>
<script>
import axios from 'axios';
import GroceryFormItemEditLink from './GroceryFormItemEditLink.vue';
import GroceryFormItemCheckboxInput from './GroceryFormItemCheckboxInput.vue';
import GroceryFormItemCheckboxLabel from './GroceryFormItemCheckboxLabel.vue';
import GroceryFormItemQtySelector from './GroceryFormItemQtySelector.vue';
import GroceryFormItemStoresSelector from './GroceryFormItemStoresSelector.vue';
export default {
data() {
return {};
},
components: {
GroceryFormItemEditLink,
GroceryFormItemCheckboxInput,
GroceryFormItemCheckboxLabel,
GroceryFormItemQtySelector,
GroceryFormItemStoresSelector
},
computed: {
allGroceryItems() {
return this.$store.state.allGroceryItems;
},
allGroceryItemsCount() {
return this.$store.getters.allGroceryItemsCount;
}
},
getters: {},
created() {
axios
.get('https://groceries-vue-api.glitch.me/get')
.then(res => {
console.log('axio.get worked! res.data =', res.data);
console.log(`typeof res.data = ${typeof res.data}`);
const groceryData = res.data;
console.log('groceryData =', groceryData);
console.log(`typeof groceryData = ${typeof groceryData}`);
const newData = res.data.map(obj => obj);
console.log('newData', newData);
return newData;
})
.then(data => {
console.log('data from second then() =', data);
return data;
})
.then(data => (this.$store.state.allGroceryItems = data))
.catch(error => {
console.log('ERROR! ->', error);
});
}
};
</script>
Why does the data change when I build my app for production? And how can I change this behavior to get the expected outcome?