Vue.js 如何在将大量数据加载到DOM之前/之后强制VueJs显示/隐藏元素？

我们有一个应用程序，可以将大量数据加载到交互式地图中

用户可以选择数据&其中一些数据需要一段时间才能加载

我们的第一个方法是：

<div v-show="loading" class="loading">Loading Data...</div>

methods: {
  loadData(data){
    this.loading = true
    // Load large amounts of data into map
    this.loading = false
  }

但这也不起作用。

加载

元素将不会出现&应用程序将等待数据加载

数据是从15MB的JSON加载的&需要大量的计算/迭代。例如，用户可以连接或比较数千个数据点

---

这样做的正确方法是什么，以便在加载数据时可以看到

加载

元素并在加载后消失？

数据是如何加载的？您可能会使用大量计算阻塞主线程，并阻止浏览器重新渲染。在这种情况下，您应该考虑使用WebWorks.您尝试过“代码> SETIMEATOUT（）），而不是<代码> $NEXTICK（）/<代码>可能是显而易见的，但是您是否通过在数据对象中添加了代码“<代码>数据（））{返回{加载：false } } /代码>？@ HuaMiBRAIHOM-将查看Web工作者解决方案，使您的属性<代码>加载< /代码> Actudio。IVOGELOV-是，已尝试

setTimeout（）

@SylvainF-是，

加载

在数据对象中。

loadData(data){
  var self = this
  this.loading = true
  Vue.nextTick()
  .then(function () {
    // Load large amounts of data into map
    Vue.nextTick()
    .then(function () {
      self.loading = false
    })
  })
}