Why is filter not working in Vue.js?

Question

Vue.js

app.vue file:

<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 file:

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

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

It seems that everything was done correctly, there are no errors in the console, but the filter does not work. Thank you.

Answer 1

v-model needs to be set at the input itself, and you are trying to bind v-model for the Search component with props.