Vue JS 简单循环 - 未捕获（承诺中）TypeError：无法读取 null 的属性（读取 \'insertBefore\'）答案

【问题标题】：Vue JS Simple loop - Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')Vue JS 简单循环 - 未捕获（承诺中）TypeError：无法读取 null 的属性（读取 \'insertBefore\'）
【发布时间】：2022-10-04 18:10:56
【问题描述】：

我正在尝试使用引导表更新表。 https://bootstrap-table.com/

该库已正确加载，但是当我更新数据时，我有： enter image description here

这是我的简单 vue 组件：

<template>
  <button @click="this.updateArtists">Click</button>
  <table
    v-if="this.artists"
    id="table"
    data-pagination="true"
    data-search="true"
  >
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="artist in this.artists" :key="artist.id">
        <td>{{ artist.id }}</td>
        <td>{{ artist.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import $ from "jquery";
import "bootstrap-table/dist/bootstrap-table.min";
import "bootstrap-table/dist/locale/bootstrap-table-fr-FR";

export default {
  name: "Test",
  data: function () {
    return {
      labels: null,
      artists: null,
    };
  },
  methods: {
    updateArtists: function () {
      this.artists = [
        {
          id: 4,
          name: "name_4",
        },
        {
          id: 5,
          name: "name_5",
        },
        {
          id: 6,
          name: "name_6",
        },
      ];
    },
  },
  beforeCreate: async function () {
    const labels = this.axios.get("/labels");
    await Promise.all([labels]).then(([labels]) => {
      this.labels = labels.data;
      this.artists = [
        {
          id: 1,
          name: "name_1",
        },
        {
          id: 2,
          name: "name_2",
        },
        {
          id: 3,
          name: "name_3",
        },
      ];
    });

    $("#table").bootstrapTable();
  },
};
</script>

<style scoped></style>

我不明白 vue 如何找到 null 的属性？当然，当我评论 $("#table").bootstrapTable(); 没有更多的问题。

如果有人有解释，那将很有帮助。

更新

没有加载引导表我没有问题。但是当我加载包时，初始化我的表。然后当我点击更新按钮时，警告和错误是标志。

使用此代码，该表可以很好地与引导表一起渲染，但更新失败（“完成”永远不会触发）：

更新代码：

<template>
  <button @click="this.updateArtists">Update</button>
  <table
    v-if="this.artists"
    id="table"
    data-pagination="true"
    data-search="true"
  >
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="artist in this.artists" :key="artist.id">
        <td>{{ artist.id }}</td>
        <td>{{ artist.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import $ from "jquery";
import "bootstrap-table/dist/bootstrap-table.min";
import "bootstrap-table/dist/locale/bootstrap-table-fr-FR";

export default {
  name: "Test",
  data: function () {
    return {
      labels: null,
      artists: null,
    };
  },
  methods: {
    updateArtists: function () {
      this.artists = [
        {
          id: 4,
          name: "name_4",
        },
        {
          id: 5,
          name: "name_5",
        },
        {
          id: 6,
          name: "name_6",
        },
        {
          id: 7,
          name: "name_7",
        },
      ];
      
      this.$nextTick(() => {
        console.log("done");
      });
    },
  },
  mounted: async function () {
    const labels = this.axios.get("/labels");
    await Promise.all([labels]).then(([labels]) => {
      this.labels = labels.data;
      this.artists = [
        {
          id: 1,
          name: "name_1",
        },
        {
          id: 2,
          name: "name_2",
        },
        {
          id: 3,
          name: "name_3",
        },
      ];

      this.$nextTick(() => {
        $("#table").bootstrapTable();
      });
    });
  },
};
</script>

<style scoped></style>

非常感谢，祝您有愉快的一天。

卡米尔

【问题讨论】：

标签： vue.js bootstrap-table

【解决方案1】：

带有id="table" 的表格仅在this.artists 为真时才会呈现。

当你的承诺解决时，它做填充艺术家，但模板不会立即更新。 #table 元素只会在下一次渲染滴答时添加到 DOM。

要等待下一个渲染滴答，请使用vm.$nextTick()：

beforeCreate() {
  await Promise.all([])...

  this.$nextTick(() => {
    $("#table").bootstrapTable()
  })
}

一些额外的注意事项：

您不应该同时使用 Vue 和 jQuery。他们在同一件事上竞争：DOM 操作。我并不是说它不起作用，但它是对微妙错误和头痛的公开邀请。
你应该使用mounted钩子而不是beforeCreate。原则上，如果你的 Promise 解决的时间少于 Vue 构建组件的时间，你会得到一个错误。现在，显然，这几乎是不可能的（你需要一个非常快速的 axios 调用（例如：一个模拟的 Promise，在测试中！？）和一个非常重的组件）但是，至少在理论上，它可能会发生。而如果你使用mounted，它就不会发生。

【讨论】：