<template>
  <div>
  search <input type="text" v-model="name" />
  <button @click="getData()">Filter</button>
  <br>
  <br>
    <div v-for="(item, index) in filterList" :key="index">
      {{ item.name }}
      {{ item.address }}
      {{ item.tel }}
      <hr>
    </div>
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      name: '',
      dataFilter: [
        {
          name: 'jon',
          address: '123 sos 32',
          tel: '0882132144'
        },
        {
          name: 'mint',
          address: 'xxx sos xee',
          tel: 'xxxxx'
        }
      ],
      filterList: []
    }
  },
  mounted () {
    this.filterList = this.dataFilter
  },
  methods: {
    getData () {
      this.filterList = this.dataFilter.filter(item => item.name === this.name)
      // check function dosomething not found name
    }
  }
}
</script>