我如何使用 javascript 在 vue js 中进行过滤搜索答案

【问题标题】：how i make filter search in vue js with javascript我如何使用 javascript 在 vue js 中进行过滤搜索
【发布时间】：2021-12-18 21:59:49
【问题描述】：

我可以编写一个只有数据和方法函数的过滤器搜索代码吗？

我尝试这样做：

var fil = new Vue ({
            el: '#app',
            data: {
                search: '',
                proL: ['css', 'c++', 'cs#'],
            },
            methods: {
                filter: function(){

                        var search_key = this.search.val();
                        
                        this.proL.filter(function(){
                            this.proL.toggle(this.proL.text().indexOf(search_key) > -1);
                        });

                }
            }
        });

这是html代码

<div id="app">
        <div >
          <input @keyup="filter()" type="text" v-model="search" placeholder="Search title.."/>
        </div>

        <div id="pro">
            <h4 v-for="item in proL">{{item}}</h4>
        </div>
    </div>

??????????

【问题讨论】：

标签： javascript html vue.js filter

【解决方案1】：

尝试使用computed 属性来定义过滤的项目，并使用箭头函数作为filter 函数回调，以便访问this：

new Vue({
  el: '#demo',
  data: {
      search: '',
      proL: ['css', 'c++', 'cs#'],
  },
  computed: {
    filtered(){
      return this.proL.filter(e => e.toLowerCase().includes(this.search.toLowerCase()))
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div >
    <input type="text" v-model="search" placeholder="Search title.."/>
  </div>

  <div id="pro">
      <h4 v-for="item in filtered">{{item}}</h4>
  </div>
</div>

【讨论】：

我可以不用计算吗？
计算是最适合这种情况的，因为它本质上是动态的
嘿，伙计，当然可以，但在我看来，计算属性是针对这类事情的，

【解决方案2】：

更好的方法是使用computed 处理程序

new Vue({
  el: '#demo',
  data: {
      search: '',
      proL: ['css', 'c++', 'cs#'],
  },
  computed: {
    filteredProL(){
      if(this.search === '') return this.proL; // If search input is empty then display all items
      else return this.proL.filter(e => e.toLowerCase().indexOf(this.search) > -1) // Working logic
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div >
    <input type="text" v-model="search" placeholder="Search title.."/>
  </div>

  <div id="pro">
      <h4 v-for="item in filteredProl">{{item}}</h4>
  </div>
</div>

【讨论】：