为啥我在 vue.js 中的自定义搜索过滤器不起作用？

Posted 2023-02-16

【中文标题】为啥我在 vue.js 中的自定义搜索过滤器不起作用？

【英文标题】：Why my custom search filter in vue.js can't work?为什么我在 vue.js 中的自定义搜索过滤器不起作用？

【发布时间】：2021-01-18 05:18:51

【问题描述】：

我不明白我的错在哪里。我尝试制作自定义搜索过滤器。我制作了一个搜索框，我在其中搜索任何内容，但是当它在我的列表中匹配时，它只给我匹配的输出。但它不起作用。它看起来不像动态的。我使用的是 vue 2。希望我忘记在我的计算属性中添加一些东西

  <template>
      <div class ="container">
        <div class="new">
          <form >
          <h1><label>Enter country name:</label></h1>
          <input type="text" name="name" class="form-control" v-model="search">
          </form>
    
        </div>
        <div class='new'>
          <ul>
            <li v-for="country in countries">country.name 
    
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere dignissimos architecto quia, quisquam ad similique corporis. Laborum, error id qui consequuntur facilis est delectus velit vel ea nisi repudiandae doloribus. </p>
              
            </li>
          </ul>
        </div>
        
      </div >
    </template>
    
    <script>
    export default 
      data()
        return  
          countries:[
           
           name:'AMERICA',
           name:'INDIA',
           name:'PAKISTAN',
           name:'SRILANKA',
    
          ],
          search:'',
        
         
      ,
      computed:  
        newfuntion()
          return this.countries.filter((funtion)=>
            return funtion.match(this.search)
          );
        
       
    ;
    </script>

【问题讨论】：

当你说“它不起作用”时，你解释了什么？它给你什么输出？你能试着输出看看哪里出了问题吗？

【参考方案1】：

看起来您没有在 v-for 中使用计算属性。

尝试将其更改为：v-for="country in newfuntion"