Vue – 在计算属性计算时显示加载器

huangapple go评论68阅读模式
英文:

Vue - show loader while computed property being computed

问题

以下是您要翻译的内容:

"loading" 元素从未显示。也许排序很快,而花费时间的是节点生成本身?然后我可以以某种方式显示加载器吗?也许可以以某种方式使用下一个刻度?我尝试过了,但没有结果。

英文:

EDIT - Found that sorting is quick, real issue is performance of rendering huge list, so already answered

pls explain to me, why this does nothing:

I have array of thousands of items, there is a button for sorting them by some prop (changes "sortBy" prop. Sorting items takes almost 2 seconds, at least that how long after the click does the list change. During computing (until new list displayed) i want to display some "Loading" element. Im not aware, byt maybe Vue has some app-wide state to tell something is being recomputed?

<div v-if="loading">Wait pliz</div>
<div @click="sortBy='ctg'">SortByCtg</div>
<div v-for="item in sortedRows">{{item.ctg}} , {{item.name}} .... </div>

and the computed prop fn:

data: function(){ 
   return { 
    'sortby': 'name', 
    'sortbyDir': 1, 
    'loading': false,
    'rows': [ {'name':'abc','ctg':'def'}, ...] 
  }
},
computed: {
    sortedRows: function(){
     this.loading = true; //  <<< should show element
     var sortby = this.sortby;
     var sortbyDir = this.sortbyDir;
     var sorted = this.rows;
     sorted = this.rows.sort(function(a, b) { 
      return sortbyDir * a[sortby].localeCompare(b[sortby]); 
     });
    this.loading = false; //  <<< hide element
    return sorted;
  }
},
...

but the "loading" element never shows. May it be sort is quick, and what is taking the time is the nodes generation itself? Then can i anyhow show the loader? Maybe somehow use next tick? I tried but with no result.

答案1

得分: 1

排序很快(几毫秒),真正需要时间的是渲染长列表。

英文:

Sorting is quick (few miliseconds),
what really takes time is rendering the long list

答案2

得分: -1

"Sorting items takes almost 2 seconds" and "May it be sort is quick" are against each other, but you can't see the loading indicator in either of them. Usually, a sort finishes in some ms, you can barely see anything. Another possibility is if it runs for 2 seconds (slow algorithm or rendering thousands of rows on the page after sort), it blocks the main thread and you won't see any changes on the page.

Your code should work, but you shouldn't change data in computed. The sort method mutating the original array, and you change the loading variable. It can also run multiple times unnecessarily.

英文:

"Sorting items takes almost 2 seconds" and "May it be sort is quick" are against each other, but you can't see the loading indicator in either of them. Usually, a sort finishes in some ms, you can barely see anything. Another possibility is if it runs for 2 seconds (slow algorithm or rendering thousands of rows on the page after sort), it blocks the main thread and you won't see any changes on the page.

Your code should work, but you shouldn't change data in computed. The sort method mutating the original array, and you change the loading variable. It can also run multiple times unnecessarily.

huangapple
  • 本文由 发表于 2023年6月2日 14:18:01
  • 转载请务必保留本文链接:https://go.coder-hub.com/76387594.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定