Question

我有一个基本的客户端渲染vue应用程序，该应用程序可以提取a json array from an API endpoint并将每个数组项的数据作为有序列表中的列表项进行渲染。

当我在本地进行开发时，数据将按预期方式呈现，使用parcel index.pug启动本地开发环境。这是预期排序列表的屏幕截图，如我的本地开发环境中的localhost:1234所示：

但是，在为生产而构建（使用parcel build index.pug）时，数据无法按预期呈现。这是生产模式下的意外行为的屏幕截图（您可以在https://errands.netlify.com/上在线观看这些行为）：

请注意，生产版本知道所获取的API数据是一个长度为6的数组（因为它渲染出6个空<li> s），但是由于某种原因，生产版本不知道每个API内的数据数组对象。

此应用的完整源代码位于https://github.com/brianzelip/groceries-vue。

主要相关代码（对API的axios调用，该更新会更新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>

为什么在构建用于生产的应用程序时数据会更改？我该如何改变这种行为以获得预期的结果？

Answer 1

您应该避免使用自闭标签。

https://github.com/vuejs/vue/issues/1036

因此您的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></GroceryFormItemEditLink>
        <GroceryFormItemCheckboxInput :slug="item.slug"></GroceryFormItemCheckboxInput>
        <GroceryFormItemCheckboxLabel :slug="item.slug" :name="item.name"></GroceryFormItemCheckboxLabel>
        <GroceryFormItemQtySelector :slug="item.slug"></GroceryFormItemQtySelector>
        <GroceryFormItemStoresSelector
          :stores="item.stores"
          :slug="item.slug"
          :defaultStore="item.defaultStore"></GroceryFormItemStoresSelector>

      </li>
    </ol>
  </form>
</template>

Vue应用程序只能在本地开发人员中正确渲染API数据，而不能在生产版本中正确渲染（使用vuex，axios和宗地）

1 个答案: