vue多條件和模糊查詢

<div class="content">
    <div class="right">
 
      <select name="sex" width='100' v-model="formData.sex">
        <option value="" selected>請選擇</option>
        <option value="1">男</option>
        <option value="2">女</option>
        <option value="3">不是人</option>
      </select>
 
      <input type="text" v-model="formData.phone" placeholder="電話(精准搜索)">
 
      <input type="text" v-model="formData.name" placeholder="姓名(模糊搜索)">
 
      <button @click="search(formData)">提交數據</button>
    </div>
    <div class="left">
      <ul>
        <li v-for="(item,index) in  realList" :key="index">
          {{item.name}} || {{item.phone}} || {{item.sex | filterSex}}
        </li>
      </ul>
    </div>
  </div>

export default {
  name: 'styleTest',
  data() {
    return {
      formData: {
        name: '',
        phone: '',
        sex: '',
      },
      realList: [],
      list: [
        {
          name: '張址',
          phone: [phone],
          sex: 1,
        },
        {
          name: '張三',
          phone: [phone],
          sex: 2,
        },
        {
          name: '李四',
          phone: [phone],
          sex: 1,
        },
        {
          name: '趙武',
          phone: [phone],
          sex: 2,
        },
        {
          name: '晉南',
          phone: [phone],
          sex: 1,
        },
        {
          name: '張東',
          phone: [phone],
          sex: 2,
        },
      ],
    };
  },
  filters: {
    filterSex(val) {
      switch (val) {
        case 1:
          return '男';
          break;
        case 2:
          return '女';
          break;
        case 3:
          return '不是人';
          break;
        default:
          return '男';
      }
    },
  },
  computed: {
    // realList() {
    //   let { name, phone, sex } = this.formData;
    //   if (name && phone && sex) {
    //     return this.list;
    //   }
    // },
  },
  created() {
    this.search({});
  },
  methods: {
    search({ name, phone, sex }) {//多條件和模糊查詢
      this.realList = this.list.filter(item => {
        let matchName = true; // 姓名 篩選
        let matchSex = true; // 性別 篩選
        let matchPhone = true; // 號碼 篩選
 
        if (sex) {
          matchSex = item.sex == sex;
        }
 
        if (phone) {
          // console.info(Object.prototype.toString.call(phone));
          matchPhone = item.phone == phone;
        }
 
        if (name) {
          // 模糊搜索;
          const keys = name
            .toUpperCase() // 轉大寫
            .replace(' ', '') // 刪掉空格
            .split(''); // 切割成 單個字
 
          matchName = keys.every(key => item.name.toUpperCase().includes(key));
        }
        return matchName && matchPhone && matchSex;
      });
    },
  },
};