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

Question

[Alex]

Добрый день, подскажите пожалуйста почему не работает фильтр, ошибок нет.

<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,
  }
}

Comments

[GeminiX]

не работает именно фильтр по search или список совсем не рисуется?

[Alex]

Александр, добрый день, фильтр по search не работает, список рисуется.

[GeminiX]

Alex, как значение в search попадает? по коду не видно.

[Alex]

Александр, забыл ещё закинуть через v-model

<InputSearchFilter
   v-model="search"
   />

[GeminiX]

Alex, кажется, что внутри компонента нужен вотчер на пропс, а в вотчере присваивать значение search

[Alex]

Александр, можно на примере пожалуйста показать. Целый день сегодня убил не нашел решение. Буду очень благодарен.

[GeminiX]

Alex, залейте в какую-нибудь песочницу минимально рабочий вариант и ссылку дайте

[Антон Антон]

версия vue какая? Если заменить компонент с search на простой инпут - работает?

[Alex]

Антон Антон 3 версия, вы просто гений все заработало, когда поменяла на input, а почему не работает с компонентом ?

Answer 1

[Антон Антон]

В третьей версии 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... (ну и в соответствующем разделе по ссылке выше)

Comments

[Alex]

Антон Антон, спасибо большое что-то я ещё больше запутался правильно ли понял ? Но ничего не работает.

<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 hover:bg-black-700 hover:border-black-700 hover:border hover:cursor-pointer" 
  placeholder="Sort by..."
  :modelValue="search"
  @update:modelValue="$emit('update:modelValue', $event.target.value)"
  >

[Антон Антон]

Alex, нет, с обычными компонентами же ничего не поменялось, так что как-то так:

<input 
  :value="modelValue"
  @input="$emit('update:modelValue', $event.target.value)"
  >

но не проверял )

[Alex]

Антон Антон, Спасибо большое, ты лучший. Все заработало !!!!!