Lawrence_33
@Lawrence_33

Почему не работает фильтр?

Добрый день, подскажите пожалуйста почему не работает фильтр, ошибок нет.
<div class="">
    <div class="text-white font-normal text-xs h-7 px-2.5 flex items-center transition duration-300 hover:cursor-pointer hover:bg-black-700 hover:rounded-xs"
    v-for="item in filteredList"
    :item="item.value"
    :key="item.id"
    >
    {{item.title}}
    </div>
  </div>

components: {
    InputSearchFilter
  },
  data(){
    return {
      search: null,
      items: [
        {id: 1, title: 'Progress', value: "Progress"},
        {id: 2, title: 'Time', value: "Time"},
        {id: 3, title: 'Time', value: "Time"},
        {id: 4, title: 'Live', value: "Live"},
        {id: 5, title: 'Time', value: "Time"},
        {id: 6, title: 'Time', value: "Time"},
        {id: 7, title: 'Time', value: "Time"},
        {id: 8, title: 'Time', value: "Time"},
        {id: 9, title: 'Time', value: "Time"},
        {id: 10, title: 'Time', value: "Time"},
      ],
    }
  },
  computed: {
    filteredList(){
      if(this.search){
        return this.items.filter((item) => {
          return this.search.toLowerCase().split(" ").every((el) => item.title.toLowerCase().includes(el)); 
        });
        
      }else {
        return this.items;
      }
    }
  }

Компонент с input
<input 
  type="text" 
  class="bg-transparent w-full px-2.5 h-7 border border-gray-900 text-gray-100 font-normal text-xs rounded-xs placeholder:text-gray-100 placeholder:font-normal placeholder:text-xs focus:border-purple caret-purple" 
  placeholder="Sort by..."
  :value="value"
  @input="$emit('input', $event.target.value)"
  ref="filter"
  >

export default {
  name: "InputSearchFilter",
  props: {
    value: String,
  }
}
  • Вопрос задан
  • 153 просмотра
Решения вопроса 1
Fragster
@Fragster
помогло? отметь решением!
В третьей версии vue изменился байндинг v-model на компоненты:
в v2 было:
<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

в v3 стало:
<CustomInput
  :modelValue="searchText"
  @update:modelValue="newValue => searchText = newValue"
/>

зато стало можно делать несколько v-model.
Соответственно, нужно поменять компонент InputSearchFilter, указав в нем правильный prop и emit https://vuejs.org/guide/components/events.html#usa... (и не забыв про emits в опциях https://vuejs.org/guide/components/events.html#dec...)

Это описано в документации по переходу https://v3-migration.vuejs.org/breaking-changes/v-... и https://v3-migration.vuejs.org/breaking-changes/em... (ну и в соответствующем разделе по ссылке выше)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы