Vueでファジークエリを実装する方法の簡単な例

HTML コード <div id="root">
        <h2>スタッフリスト</h2>
        <input type="text" placeholder="お名前を入力してください" v-model="keyWord">
        <ul>
            <li v-for="(p,index) filPersons の" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>

スクリプトコード new Vue({
        el:"#ルート",
        データ：{
            キーワード：''、
            人数:

                {id:'001',名前:'馬東梅',年齢:18,性別:'女性'},
                {id:'002',名前:'周冬雨',年齢:19,性別:'女性'},
                {id:'003',名前:'ジェイ・チョウ',年齢:21,性別:'男性'},
                {id:'004'、名前:'デリック・ワン'、年齢:22、性別:'男性'}
        ]、
        },
        計算:{
            filPersons(){
                return this.persons.filter((p)=>{//フィルタリングされた配列を返します return p.name.indexOf(this.keyWord) !==-1
                })//filter はキーワードを含まないケースを除外するフィルタリング関数です}
        }
    })

HTMLコードは変更されません スクリプトコード new Vue({
        el:"#ルート",
        データ：{
            キーワード：''、
            人数:

                {id:'001',名前:'馬東梅',年齢:18,性別:'女性'},
                {id:'002',名前:'周冬雨',年齢:19,性別:'女性'},
                {id:'003',名前:'ジェイ・チョウ',年齢:21,性別:'男性'},
                {id:'004'、名前:'デリック・ワン'、年齢:22、性別:'男性'}
        ]、
        filPersons:[//これが存在しない場合、personsの値を元の値に戻すことはできません]
        
        },
        時計：{
            キーワード：{
                immediate:true, //ボックスの値が変更されていないすべての状況を表示するには、次の関数を実行します handler(val){
                    this.filPersons = this.persons.filter((p)=>{
                    p.name.indexOf(val) !==-1 を返す
                })
                }
            }
            
        }
    })