vuejs3 - 无法读取 null 的属性“insertBefore”

Question

我有一个使用 v-for 显示的 div 标签列表。当我将项目添加到状态时，UI 应该会自动更新。

<template>
  <button type="button" v-on:click="addItem">
    Add Item
  </button>
  <div>
    <div v-for="li in list" :key="li" v-text="li"></div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    const list = [];

    return {
      list
    };
  },
  methods: {
    addItem() {
      const current = `list-item-${this.list.length + 1}`;

      //Send to a server (Assume sessionStorage)
      this.sendToServer(current).then((response) => {
        this.getListItemsFromServer();
      });
    },
    sendToServer(item) {
      let data = JSON.parse(sessionStorage.getItem("server-data"));
      if (!Array.isArray(data)) {
        data = [];
      }
      data.push(item);
      sessionStorage.setItem("server-data", JSON.stringify(data));

      return Promise.resolve();
    },
    getListItemsFromServer() {
      /// Let's assume sessionStorage is the server database
      try {
        let data = JSON.parse(sessionStorage.getItem("server-data"));
        if (!Array.isArray(data)) {
          data = [];
        }

        this.list = data;
      } catch (e) {
        console.error(e);
        this.list = [];
      }
    }
  },
  mounted() {
    this.getListItemsFromServer();
  }
};
</script>

当我在开发模式下运行它时，这非常有效。但是，当我部署生产构建时，它会失败并显示上述错误消息。大多数时候，我为缓解这种情况所做的就是使用 location.reload() 彻底运行页面刷新。然而，这不是一个干净的方法。

这是一个错误，一个已知问题还是我做错了什么。

请帮忙。

标签： vuejs3