У меня есть базовое клиентское визуализированное приложение vue, которое извлекает массив json из конечной точки API и отображает данные из каждого элемента массива как элемент списка в упорядоченном списке.
Данные отображаются так, как ожидалось, когда я работаю локально, используя parcel index.pug, чтобы ускорить мою локальную среду разработки.Вот снимок экрана с ожидаемым упорядоченным списком, как показано в моей локальной среде разработчиков на localhost:1234:
Однако данные не отображаются должным образомкогда я строю для производства (используя parcel build index.pug).Вот снимок экрана с неожиданным поведением в производственном режиме (который вы можете увидеть в прямом эфире по адресу https://errands.netlify.com/):
Обратите внимание, что производственная версия знает о выбранныхДанные API - это массив длиной 6 (потому что он выводит 6 пустых <li> с), но по какой-то причине рабочая версия не знает данных внутри каждого объекта массива.
Полный исходный коддля этого приложения здесь https://github.com/brianzelip/groceries-vue.
Основной соответствующий код (вызов axios API, который обновляет хранилище vuex, а затем выводит упорядоченный список) живет в TheGroceryForm.vue, который также включен здесь:
<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>
Почему данные меняются, когда я создаю свое приложение для производства? И как я могу изменить это поведение, чтобы получить ожидаемый результат?