Vue.js - обновляет вычисляемое свойство после обновления асинхронного вычисляемого свойства. - PullRequest
Новая
       23

Vue.js - обновляет вычисляемое свойство после обновления асинхронного вычисляемого свойства.

0 голосов
/ 25 января 2019

У меня есть вычисляемое свойство (FilterSyms), которое зависит от асинхронного вычисляемого свойства (AllSynonyms). Я использую асинхронный плагин для этого: https://www.npmjs.com/package/vue-async-computed.

Однако, когда данные обновляются, вычисляемое свойство не ожидает результата обновления асинхронного свойства. Поэтому я получаю не актуальную информацию. Затем после того, как свойство async фактически вернет новое значение, вычисляемое свойство больше не запускает update.

Как я могу заставить его работать так, чтобы свойство компьютера ожидало получения результата от асинхронного вычисляемого свойства?

Код ниже: 

asyncComputed: {
  async allSynonyms() {
    let allSyns = await this.$axios.$post('/db/sym/synonyms', this.model.syms);
    return allSyns;
  }
},

computed: {
  filteredSyms() {

    let that = this;
    let allSyn = this.allSynonyms;

    let exactMatch = this.symsByRating.filter(
      function (v) {
        let isExactMatch = v.title.toLocaleLowerCase().indexOf(that.searchString.toLocaleLowerCase()) >= 0;

        return !that.idsToFilter.includes(v.id) && isExactMatch
          && (!that.currentBodyPart || v.bodyParts.indexOf(that.currentBodyPart) >= 0)
          && that.hasMoreSubsyms(v)
          && (!allSyn || !that.containsObject(v, allSyn))
          && (v.sex == that.model.sex || v.sex == 'NA');
      });

    let partialList = [];

    exactMatch.forEach(ex => partialList.push({n: 100, sym: ex}));

    for (let sym of this.symsByRating ) {

      let searchWords = this.searchString.toLocaleLowerCase().split(' ');
      let symWords = sym.title.toLocaleLowerCase().split(' ');

      let n = 0;
      let isPartialMatch = false;
      symLoop:for (let symWord of symWords) {
        symWord = symWord.substring(0, symWord.length - 1);
        for (let searchWord of searchWords) {

          // don't count last letters of the words
          searchWord = searchWord.substring(0, searchWord.length - 1);

          if (searchWord.length > 2 && symWord.indexOf(searchWord) >= 0) {
            n++;
            isPartialMatch = true;
          }
        }
      }

      if (exactMatch.indexOf(sym) < 0 && isPartialMatch
        && (!this.currentBodyPart || sym.bodyParts.indexOf(this.currentBodyPart) >= 0)
        && this.hasMoreSubsyms(sym)
        && (!allSyn || !this.containsObject(sym, allSyn))
        && (sym.sex == that.model.sex || sym.sex == 'NA')) {

        partialList.push({n: n, sym: sym});

      }
    }

    partialList.sort(function(obj1, obj2) {
      return obj2.n - obj1.n;
    });

    if (this.searchString && this.searchString != '') {
      partialList = this.filterSynonyms(partialList);
    }

    let fs = partialList.map(ws => ws.sym);

    console.dir(fs);

    return fs;

  }
}

Многое происходит с отфильтрованным методом, но я предполагаю, что главное здесь заключается в том, что он использует this.allSynonyms для выполнения проверки, но он не обновляется во время выполнения filterSyms.

Спасибо за ваши предложения!

1 Ответ

0 голосов
/ 25 января 2019

(Я действительно не проверял это, но оно должно работать.)

vue-async-computed предоставляет статус в this.$asyncComputed.allSynonyms.success.

попробуйте добавить this.$asyncComputed.allSynonyms.success в качестве зависимости к filteredSyms, и оно должно обновиться при изменении состояния успеха.

...