[v3]Calling vl updateitems never repaint vl via async ajax callback

1

If page has transited via componenturl

async ajax callback loaded via pagemounted worked

but calling virtuallist.updateitems via callback never repainted vl

2

if async=false,it works
i still don‘t clear that

3

More complete code example or JSFiddle would be great to see

4 
<div class="navbar">
  <div class="navbar-inner">
    <div class="left">
      <a href="/index/" class="link">
        <i class="icon icon-back navbar-icon"></i>
      </a>
    </div>
    <div class="title sliding">我的藏书</div>
    <div class="right">
          <a href="/mybooks/addbook/" class="link icon-only">
            <i class="icon material-icons md-only">add</i>
          </a>
    </div>
    <div class="subnavbar">
        <form data-search-container="#item-mybooks-list" data-search-item="li" data-search-in=".item-title" class="searchbar searchbar-init">
        <div class="searchbar-inner">
            <div class="searchbar-input-wrap">
            <input id="input-mybooks-searchbar" type="search" placeholder="筛选 回车深度查询" @keyup="dS"/>
            <i class="searchbar-icon"></i>
            <span class="input-clear-button"></span>
            </div>
            <span class="searchbar-disable-button">取消</span>
        </div>
        </form>
    </div>
  </div>
</div>
<div class="searchbar-backdrop"></div>
<div class="page-content">
    <div class="searchbar-not-found">
        <div class="block-title">当前列表无符合筛选的结果</div>
        <div class="block row">
            <div class="col"><a class="button" href="#" @click="deepSearch">深度查询</a></div>
        </div>
    </div>
    <div id="item-mybooks-list" class="list virtual-list media-list searchbar-found"></div>
</div>

···
return {
methods: {

on: {
  pageBeforein: function (e,page) {
    var app = this.$app;
    var root = this.$root;
    var items = [];
    root.api('getboks',{num:20},function(data){
      if(data.code===1){
        for (var i = 0; i < data.data.length; i++) {
          var b = data.data[i].bib_data;
          items.push({
            book_id: data.data[i].book_id,
            bibl_id: data.data[i].bibl_id,
            image: data.data[i].imgs,
            title: b.title,
            publisher: b.publisher,
            pubdate: b.pubdate,
            isbn13: b.isbn13,
            author: b.author
          });
        }
      }
    });
   
    var virtualList = app.virtualList.create({
    el: '#item-mybooks-list',
    items: items,
    searchAll: function (query, items) {
        var found = [];
        for (var i = 0; i < items.length; i++) {
          var s = items[i].title + items[i].pub + items[i].author;
          if (s.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
        }
        return found;
    },
    itemTemplate:
        '<li>' +
        '<a href="/mybooks/editbook/{{book_id}}/" class="item-link item-content">' +
          '<div class="item-media">' +
              '<img class="lazy" src="{{image}}" onerror="javascript:this.src=\'./img/imagefail.png\'"/>' + 
          '</div>' +
          '<div class="item-inner">' +
          '<div class="item-title-row">' +
              '<div class="item-title">{{title}}</div>' +
          '</div>' +
          '<div class="item-subtitle">{{author}}</div>' +
          '<div class="item-subtitle">{{publisher}}</div>' +
          '<div class="item-subtitle">{{pubdate}}</div>' +
          '<div class="item-subtitle">{{isbn13}}</div>' +
          '</div>' +
        '</a>' +
        '</li>',
    height: 180,
    });
  }
}

}

···

root.api is a function via async ajax,
If callback runs after page transition,it won’t repaint the virtual list
but sync ajax should repaint vl

5

This is how JavaScript works in general. Just init Virtual List AFTER you received data

root.api('getboks',{num:20},function(data){
  if(data.code===1){
    for (var i = 0; i < data.data.length; i++) {
      var b = data.data[i].bib_data;
      items.push({
        book_id: data.data[i].book_id,
        bibl_id: data.data[i].bibl_id,
        image: data.data[i].imgs,
        title: b.title,
        publisher: b.publisher,
        pubdate: b.pubdate,
        isbn13: b.isbn13,
        author: b.author
      });
    }

    var virtualList = app.virtualList.create({
      el: '#item-mybooks-list',
      items: items,
      searchAll: function (query, items) {
          var found = [];
          for (var i = 0; i < items.length; i++) {
            var s = items[i].title + items[i].pub + items[i].author;
            if (s.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
          }
          return found;
      },
      itemTemplate:
          '<li>' +
          '<a href="/mybooks/editbook/{{book_id}}/" class="item-link item-content">' +
            '<div class="item-media">' +
                '<img class="lazy" src="{{image}}" onerror="javascript:this.src=\'./img/imagefail.png\'"/>' + 
            '</div>' +
            '<div class="item-inner">' +
            '<div class="item-title-row">' +
                '<div class="item-title">{{title}}</div>' +
            '</div>' +
            '<div class="item-subtitle">{{author}}</div>' +
            '<div class="item-subtitle">{{publisher}}</div>' +
            '<div class="item-subtitle">{{pubdate}}</div>' +
            '<div class="item-subtitle">{{isbn13}}</div>' +
            '</div>' +
          '</a>' +
          '</li>',
      height: 180,
    });
  }
});