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

Question

[Nikolai Khoziashev]

файл App.vue:

<template>
  <div id="app">
    <Search v-model="search"></Search>
    <ul>
      <li v-for="(element, idx) in searchName" :key="idx">
        {{ element.name }} - {{ element.age }}
      </li>
    </ul>
  </div>
</template>

<script>
import Search from "./components/Search.vue";

export default {
  name: "App",
  components: {
    Search
  },
  data() {
    return {
      search: "",
      elements: [
        {
          name: "Bob",
          age: 30,
        },
        {
          name: "Mark",
          age: 50,
        }
      ]
    }
  },
  computed: {
    searchName() {
      return this.elements.filter((elem) => {
        return elem.name.toLowerCase().includes(this.search.toLowerCase());
      })
    }
  }
}
</script>

файл Search.vue:

<template>
  <div id="person">
    <label>
      Search Name:
      <input type="text" />
    </label>
  </div>
</template>

<script>
export default {
  name: "Search"
}
</script>

Вроде все сделал правильно, ошибок в консоли нет, но фильтр не работает. Спасибо.

Answer 1

[Валерий Воронков]

v-model нужно ставить у самого инпута, а Вы пропсами пытаетесь привязать v-model для компонента Search.

Comments

[Валерий Воронков]

Если в общем, то в инпуте вы вводите то ,что вам нужно делать, и из инпута эмитите в родителя данные через this.$emit('someHandler', data_from_v_model). А в App Вам нужно поставить на компонент слушатель @someHandler = "someListener" и в этом метоже уже осуществлять обработку.