Question

我正在使用bootstrap-vue b表和b分页组件。但是由于有两个记录，所以我使用分页调用来备份，这意味着将分页信息传递给后端，仅获取每个页面的对应记录。

好东西： 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个项目。这是a link！

如果我去检查Chrome调试器中的常规页面元素，则表内容为空。这是a link！

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

如何动态执行渲染表

0 个答案: