带有 2 个 v-for 的 vuejs 搜索过滤器

Question

我计算了以下过滤器

<script>
    export default {
        data() {
        return {
           columns:{},
           search:"",
           trovato:{},
        };
        },
        
        
        computed: {

       
           searchit() {

              const sear =this.search.toLowerCase().trim();
              if(!sear) return this.columns;
              Array.from(this.columns).forEach(element => {
                 element.filter((item) => {
    
 
                    if(item.toLowerCase().includes(sear)){
                     
                       this.trovato = item;
                       console.log(this.trovato);
                       return this.trovato;
                    }
                 
                })
             })
           }
    }
</script>

效果很好，console.log(this.trovato) 打印与我搜索的名称相匹配的正确列。

问题是我无法在 v-list 中打印它，一开始它显示了 var 列的所有值{}，但在我键入内容后它不显示任何内容，它是全部空白。这是我正在使用的代码：

<v-list-item>
   <v-text-field append-icon="search" v-model="search" label="Cerca" ></v-text-field>
</v-list-item>
<v-list v-for="(item,index) in searchit" :key="index">
     <v-list-item v-for="ved in item" :key="ved.id">
         <v-list-item-content>
                                    
               <v-list-item-title >{{ved}}</v-list-item-title>
                                   
                                   
         </v-list-item-content>
     </v-list-item>
</v-list>

Answer 1

Array.prototype.filter return 是一个新数组，不会改变原始数组。（参见 documentation）

所以在这里，您过滤了它们，但没有将新过滤的数组分配给任何东西，所以它进入了空白。

此外，从计算的组件 data 改变组件确实是一种不好的做法。您假设 return 一个从该数据派生的新对象/数组。

searchit() {
  const sear =this.search.toLowerCase().trim();

  if(!sear) { return this.columns; }

  const newColumns = this.columns.map(col => {
     return col.filter((item) => {
        if(item.toLowerCase().includes(sear)){
           this.trovato = item; // If possible, avoid setting data from a computed
           return this.trovato;
        }
      })
  })
  return newColumns;
}

带有 2 个 v-for 的 vuejs 搜索过滤器

vuejs search filter with 2 v-for

javascript

vue.js

vuejs2

vuetify.js