javascript - 如何动态强制渲染表

Question

我正在使用 bootstrap-vue b-table 和 b-pagination 组件。但是由于有两条多条记录，所以我使用分页调用backed，这意味着将分页信息传递给后端，只为每个页面获取对应的记录。

好事：1.数据在后端和前端之间正确传递。2、通过VUE调试工具调试前端页面，b表组件属性正确。

问题：表格没有渲染，如果我通过 chrome 调试工具检查元素，它在页面中看起来是空白的。表格容器的元素（表格主体）为空。

一个简短的示例代码：

  <b-container>
    <div v-if="guards_for_asyc_fetch_data_call">
      <b-row><b-col><h2>Title</h2></b-col></b-row>
      <b-row>
        <b-col>
          <b-table
            :items="items"
            :fields="fields"
            :current-page="currentPage"
            :per-page="perPage"
            :stacked="true"
            small
            striped
            fixed
            hover/>
        </b-col>
      </b-row>
      <b-row>
        <b-col>
          <b-pagination
            :total-rows="totalRows"
            :per-page="perPage"
            :number-of-pages="totalPages"
            v-model="currentPage"
            align="center"
          />
        </b-col>
      </b-row>
    </div>
  </b-container>
</template>

<script>
export default {
computed: {

    totalRows() {
      return {dynamic_udpate};
    },
    perPage() {
      return {dynamic_udpate};
    },
    currentPage: {
      get: function() {
         return {dynamic_udpate};
      },
      set: function (newPage) {
         {asyc_call_fetch_data_from_backend}
      }},
    totalPages() {
       return {dynamic_udpate};
    },
    items() {
      return {dynamic_udpate};
    }
  }
}
</script>

期望：在后端调用后刷新数据时动态更新表格内容。

实际结果是：当我点击除第一页以外的页面导航时，容器只显示空白。对于 vue 调试器，您可以看到元素是新获取的元素，id 从 6 开始，因为我设置为每页显示 5 个项目。这是一个链接！

如果我在 Chrome 调试器中检查常规页面元素，则表格内容为空。这是一个链接！

任何人都知道我该如何解决这个问题？

标签： javascriptvue.jsvue-component