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>
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;
            } 
        }
    }
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-1bdfbe8-3149a.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-1bdfbe8-3149a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?