在计算属性上启用输入字段的加载 state

Question

编辑：在帖子末尾添加了代码笔

如何启用（更改为 true）计算属性中输入字段的加载？

在接下来的演示示例中，我unexpected side effect in "inputFilterParentsAndChilds" computed property.

搜索字段和列表

<template>
    <q-input
        label="Search"
        v-model="searchValue"
        placeholder="Minimum 3 characters"
        :loading="loadingState"
    />

    <q-list
      v-for="pater in inputFilterParentsAndChilds"
      :key="pater.id_parent"
    >
      <q-item>
        <q-item-section>
          <q-item-label>
            {{ pater.name }}
          </q-item-label>
        </q-item-section>
      </q-item>

        <q-list
        v-for="filius in pater.allfilius"
        :key="filius.id_filius"
        >
        <q-item>
            <q-item-section>
            <q-item-label>
                {{ filius.title }}
            </q-item-label>
            </q-item-section>
        </q-item>
        </q-list>
    </q-list>
</template>

计算适当性

<script>
export default {
  data() {
    return {
      loadingState: false,
      searchValue: ''
    };
  }
}

computed: {
    //filter the parent list with nested data (childs)
    inputFilterParentsAndChilds() {
      if (this.searchValue.length > 2) {

        this.loadingState = true; // error!! unexpected side effect in "inputFilterParentsAndChilds" computed property

        const filteredPaterArr = this.records.map((rows) => {          
          const filteredParent = rows.filius.filter(
            ({ name }) =>
               name.toLowerCase().match(this.searchValue.toLowerCase())
          );

          const filteredChilds = rows.filius.filter(
            ({ title }) =>
              title.toLowerCase().match(this.searchValue.toLowerCase())
          );

          if (filteredChilds.length) {
            this.loadingState = false;
            return { ...rows, filius: filteredParent };
          } else {
            this.loadingState = false;
            return { ...rows, filius: filteredChilds };
          }
        });

        return filteredPaterArr.filter((obj) => obj.filius.length);
      } else {
        return this.records;
      }      
    }
}
</script>

关于嵌套的 v-for 列表过滤嵌套的 v-for 列表

已编辑

CODEPEN https://codepen.io/ijose/pen/BaYMVrO

为什么加载对我来说很重要？

如果列表有数百条记录，过滤器会很慢并且看起来（错误地）已冻结，需要加载以通知用户过滤操作仍在进行中

Answer 1

你不知道，计算属性根本无法改变 state。

您可以通过观察 searchValue 来实现类似的效果。

data () {
  return {
    searchValue: '',
    isLoading: false,
    filteredElements: []
  }
},
watch: {
  searchValue: {
    immediate: true, // tells Vue to run handler function right after constructing the component
    handler () {
      // this function will be triggered when searchValue changes
      this.isLoading = true
      // give Vue chance to render the loader before doing heavy computation in 'filterElements' function
      this.$nextTick(() => {
        this.filteredElements = this.filterElements()
        this.isLoading = false
      })
    }
  }

关于 nextTick 的文档 关于观察者的文档

编辑：你有没有测量过它真的是计算让你的下拉变慢而不是渲染？ 查看有关性能的文档，尤其是“Virtualizing large lists”