How to control the display and concealment of the corresponding content of input in vue

Why do I call the arr2 method three times in mount? how do I display the corresponding content of the lower input when the value of input changes? now it keeps showing, I can"t control it to show and hide in arr2 

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div id="itany">
    <ul class="form-ul">
        <li class="form-item">
            <h4 class="form-title"></h4>
            <input type="text" v-model="name" class="form-input">
            <i class="icon pen"></i>
        </li>
    </ul>
    <p v-for="(v,k) in arr2" :key="k" v-show="flag">
        {{v}}
    

</div>
<!---->
<script>
    //export default{
    //   create(){
    //       this.request();
    //   },
    //   methods:{
    //    request(){  
    //    }
    //}
    //}
    //import axios from "./axios" 
    //Vue.prototype.$http = axios

    var vm = new Vue({
        el:"-sharpitany",
        data:{
            flag:false,
            arr:["","alex","mark"],
            name:""
        },
        //
        created: function(){


       },
        
        computed:{
            arr2:function () {
                var temp=[];
                //console.log(this.flag);
                
                this.arr.forEach(val=> {
                    if(val.includes(this.name)){
                    this.flag=true;
                    temp.push(val);
                console.log(this);
            }
        });
        console.log(temp);
        return temp;
    }
    }
    })

</script>
Javascript vue.js
Mar.01,2021 
<div id="itany">
    <ul class="form-ul">
      <li class="form-item">
        <h4 class="form-title"></h4>
        <input type="text" v-model="name" class="form-input" @input="changeName">
        <i class="icon pen"></i>
      </li>
    </ul>
    <p v-for="(v,k) in arr2" :key="k">{{v}}

  </div>
data () {
      return {
        flag: false,
        arr: ['', 'alex', 'mark'],
        arr2: [],
        name: ''
      };
    },
    
    methods: {
      changeName () {
        this.arr2 = [];
        if (this.name) {
          this.arr.forEach(val => {
            if (val.includes(this.name)) {
              this.flag = true;
              this.arr2.push(val);
            }
          });
        }
      }
    }

none of you understand what other people think.
he wants to make a fuzzy query.
first of all, you get rid of that v-show. Because it doesn't work.
v-for an empty array. Of course there's nothing.
wrong judgment.
'Manager'. Manager ('') / / true
you add a this.name! ='
perfect result.
< input v index model = "str" / >
< div v for = "(item,index) in list2": key= "index" > 

{{item}}

< / div >
computed: {

  list2:function(){
        let arr = [];
        let that = this;
        this.list.map((item,index)=>{
            if(item.includes(that.str) && that.str !=''){
                console.log(item)
                arr.push(item)
            }
        })
        return arr;
  }

}

clipboard.png

try changing v-show to v-if

@ change event is fine, isn't it? According to your expression? What is involved in calculating attributes?

It is wrong to hide the operation in the

computed method. You can add more listeners to the input. The initial display is false, only if the name value of v-model is not empty, set to true

. 
    methods:{
        showList:function(){
            if(this.name!=""){
                this.flag=true;
            }else{
                this.flag=false;
            } 
        }
    }

Previous: There are three ul, on my page. I switch the contents of the ul when I click, but when I switch, I will see the content of the previous ul flash. How to solve the problem of flashing?

Next: I want to use php to make a Monty Hall question. How do you write the logic?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-42bfc49-6c43.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-42bfc49-6c43.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?