VueJS Компьютерная собственность с Loda sh Дебад - PullRequest
Новая
       106

VueJS Компьютерная собственность с Loda sh Дебад

1 голос
/ 07 марта 2020

Я фильтрую массив больших элементов на основе пользовательского ввода, и это становится медленным. Итак, желая внедрить дебод Loda sh. Тем не менее, отказ не влияет ни на что.

Ниже приведено поле ввода поиска в HTML, где пользователь вводит фильтр для массива. 

<input v-model="search" type="text"/>

В следующем, Я зацикливаюсь на вычисляемом свойстве filteredIcons, чтобы показать элементы. 

<section v-if="icons.length">
  <button v-for="(icon, index) in filteredIcons" :key="index">
    <span v-html="icon.icon"></span>
    <span v-text="icon.name"></span>
  </button>
</section>

И это где большой массив icons и фильтрация по вычисляемому свойству. 

import { debounce } from "lodash";

export default {
  data() {
    return {
      icons: [
               {
                 "author":"svg",
                 "icon":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13 16v5a1 1 0 01-1 1H9l-3-6a2 2 0 01-2-2 2 2 0 01-2-2v-2c0-1.1.9-2 2-2 0-1.1.9-2 2-2h7.59l4-4H20a2 2 0 012 2v14a2 2 0 01-2 2h-2.41l-4-4H13zm0-2h1.41l4 4H20V4h-1.59l-4 4H13v6zm-2 0V8H6v2H4v2h2v2h5zm0 2H8.24l2 4H11v-4z\"/></svg>",
                 "name":"icon-announcement.svg"
               },
               {
                 "author":"svg",
                 "icon":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M20 9v10a2 2 0 01-2 2H6a2 2 0 01-2-2V9a2 2 0 01-2-2V5c0-1.1.9-2 2-2h16a2 2 0 012 2v2a2 2 0 01-2 2zm0-2V5H4v2h16zM6 9v10h12V9H6zm4 2h4a1 1 0 010 2h-4a1 1 0 010-2z\"/></svg>",
                 "name":"icon-archive.svg"
               }
             ],
      search: ""
    };
  },
  computed: {
    filteredIcons: {
      get() {
        return this.icons;
      },
      set: debounce(function() {
        this.icons = this.icons.filter(icon => {
          icon.name.toLowerCase().includes(this.search.toLowerCase());
        });
      }, 500)
    }
  }
}

Я изо всех сил пытаюсь понять, почему это не работает, и что было бы лучшим способом go о фильтрации больших элементов данных в массиве путем реализации debounce. Любые советы будут оценены.

1 Ответ

1 голос
/ 08 марта 2020

Ваша функция фильтра не возвращает результат String#includes, в результате чего все элементы не соответствуют фильтру, что приводит к пустому массиву. Вы можете добавить ключевое слово return, чтобы получить результат: 

const filteredIcons = this.icons.filter(icon => {
  return icon.name.toLowerCase().includes(this.search.toLowerCase())
})

... или удалить скобки и точку с запятой: 

const filteredIcons = this.icons.filter(icon => icon.name.toLowerCase().includes(this.search.toLowerCase()))

Кроме того, отладка должна быть происходит на входе пользователя; не на вычислителе. Я бы использовал watcher на входе v-model (то есть search), а затем отменил бы результат: 

export default {
  watch: {
    search: {
      handler(search) {
        this.setIconsDebounced(search)
      },
      immediate: true
    }
  },
  methods: {
    setIconsDebounced: _.debounce(function(search) {
      this.filteredIcons = this.icons.filter(/*...*/)
    }, 500)
  }
}

Это устраняет необходимость в вычисляемой пропе , но вам все еще нужна переменная для хранения отфильтрованных значков, поэтому объявите ее в реквизитах данных: 

export default {
  data() {
    return {
      filteredIcons: []
    }
  }
}

demo

...