仅在调整窗口大小后才显示项目

Question

我需要用我通过api获得的信息填写列表。信息将根据请求发送到服务器，之后脚本应将其带到列表中，但只有在窗口大小更改后才会显示列表。如何解决此问题并显示列表而不进行缩放？

    <template>
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner sliding">
          <div class="left">
            <a href="#" class="link back">
              <i class="icon icon-back"></i>
              <span class="ios-only">Back</span>
            </a>
          </div>
          <div class="title">Tasks</div>
          <div class="right">
            <a href="#" class="link open-prompt-custom" @click="add">
              <i class="icon f7-icons ios-only">add</i>
              <i class="icon material-icons md-only">add</i>
            </a>
            <a href="#" class="link" @click="refresh">
              <i class="icon f7-icons ios-only">refresh</i>
              <i class="icon material-icons md-only">refresh</i>
            </a>
          </div>
          <div class="subnavbar">
            <form data-search-container=".virtual-list" data-search-item="li" data-search-in=".item-title" class="searchbar searchbar-init">
              <div class="searchbar-inner">
                <div class="searchbar-input-wrap">
                  <input type="search" placeholder="Task search"/>
                  <i class="searchbar-icon"></i>
                  <span class="input-clear-button"></span>
                </div>
                <span class="searchbar-disable-button">Cancel</span>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="searchbar-backdrop"></div>
      <div class="page-content">
        <div class="list simple-list searchbar-not-found">
          <ul>
            <li>No tasks</li>
          </ul>
        </div>
        <div class="list virtual-list media-list searchbar-found"></div>
      </div>
    </div>
  </template>
<script>
  return {
    data: function() {
      var items = [];
      var userId = window.localStorage.getItem("userId");
      console.log(userId);
      app.request.getJSON('http://127.0.0.1:8000/api/taskRoomShow/' + userId, function(data) {
        console.log(data);
        for (var i = 0; i <= data.data.length; i++) {
          items.push({
            id: data.data[i].id,
            title: data.data[i].name,
            subtitle: "Task"
          });
        }
      });
      return {
        items: items
      };
    },
    on: {
      pageBeforeRemove: function() {
        var self = this;
        self.virtualList.destroy();
      },
      pageInit: function() {
        var self = this;
        self.virtualList = self.$app.virtualList.create({
          el: self.$el.find('.virtual-list'),
          items: self.items,
          searchAll: function(query, items) {
            var found = [];
            console.log(data);
            for (var i = 0; i < items.length; i++) {
              if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
            }
            return found;
          },
          itemTemplate: '<li>' +
            '<a href="/tasks-room/" id={{id}} @click="getClickId" class="item-link item-content">' +
            '<div class="item-inner">' +
            '<div class="item-title-row">' +
            '<div class="item-title">{{title}}</div>' +
            '</div>' +
            '<div class="item-subtitle">{{subtitle}}</div>' +
            '</div>' +
            '</a>' +
            '</li>',
          height: self.$theme.ios ? 63 : 73,
        });
      }
    },
    methods: {
      refresh: function() {
        var router = this.$router;
        router.refreshPage()
      },
      getClickId: function() {
        $(document).ready(function() {
          $('.item-link').click(function() {
            console.log(this.id);
            window.localStorage.setItem("trId", this.id);
          });
        });
      },
    }
  }
</script>