时间戳

首页 > 解决方案 > Vue组件方法行为怪异-处理数据时加载器动画不起作用

vue.js - Vue组件方法行为怪异-处理数据时加载器动画不起作用

问题描述

我试图弄清楚为什么会发生这种情况 - 长时间处理数据的加载程序没有显示..只有在处理完成后。键值项目的巨大（几千个项目）对象，并希望它们可过滤 - 这有效 - 但需要几秒钟。我正在使用 VueJS 2。

我想在运行时使用该isworking 值显示“请稍候”消息。我有一个跨度v-if="isworking"，定义为 valuefalse作为初始值。

在第一行我设置了this.isworking道具，但没有看到“请稍候”，该函数挂起几秒钟以进行搜索，然后将 isworking 道具设置为 true - 我通过评论最后一个来尝试isworking=false- 无法计算找出为什么它等待将其更改为 true 以结束庞大的处理。

该window.deaccent方法是 fn 用基本的 ansii 字符替换字符串中的所有重音字符，没什么特别的。

在模板中，我有一个简单的：

<form @submit="searchmath">
 <span v-if="working">please wait</span>
 <input v-model=...>
 <div v-for="(item,index) in searchmatchitems"> ... </div>
</form>

组件中的方法：

    searchmatch: function($event){
      this.isworking = true;
      this.$forceUpdate(); // tried also this, does not help
      $event.stopPropagation();$event.preventDefault();
      try{
        var searchid = window.deaccent(this.search_string.toLowerCase());
        var searchobj = this.cdata;
        let result = Object.keys(this.cdata).filter(function(el,i,c){ 
          var elk = window.deaccent(el).toLowerCase();
          var elv = window.deaccent(searchobj[el]);
          return elk.indexOf(searchid) > -1 || elv.indexOf(searchid) > -1;
        }, searchid);
        this.searchmatchitems = result;
        this.isworking = false;
      } catch(e){ console.log(e); this.isworking = false; return [];}
    }

我还尝试将 event.preventDefault() 移到底部，以确保它不会影响任何东西，但没有运气。

那个 cdata 是一个简单的 key-value 对象，有很多这样的 props，大约有 4000 个项目

data: {
  cdata: {
             "lorem": "aa",
             "ipsum": "bc",
             "dolor": "de",
             ....
         },
  isworking: false,
    ....
}

标签： vue.jsvuejs2reactive-programming

解决方案

这里有2个问题。

首先，您working在模板、isworking数据和代码中使用。

其次，您的方法不调用任何异步代码，因此它设置isworking为 true，确实有效，然后设置isworking为 false。在这种情况下，您的模板将永远没有机会刷新，并且 UI 将冻结，直到方法返回。

例如，如果您对网络端点进行异步调用，然后isworking在回调中设置为 false，您将获得预期的结果。

如果您有长时间运行的代码并希望防止 UI 冻结，则需要使用 Web 工作线程

推荐阅读