时间戳

首页 > 解决方案 > 您能帮我解决我的 vue 代码中的落后问题吗？

vue.js - 您能帮我解决我的 vue 代码中的落后问题吗？

问题描述

我有一个关于我的 vue 代码的问题，我正在制作一个过滤器下拉列表，但是当我输入一个键来触发用于过滤 arr 的按键按下事件时，它每次在第二个事件之后都会更改 dom（落后一步）。

这是代码笔：

https://codepen.io/dyonvangerwen/pen/zYvjMdY

它只保留 arr 中与输入匹配的值

模板：

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-row>
          <v-col cols="12" sm="6" md="3">
            <v-text-field
              v-model="inputValue"         
              label="Filled"
              placeholder="Placeholder"
              filled
              v-on:keydown="tester"
            ></v-text-field>
         <v-card
    class="mx-auto"
    max-width="400"
    tile
  >
    <v-list-ite >
      <v-list-item-content v-for=" item in itemsInDropdown" :key="item">
        <v-list-item-title>{{item}}</v-list-item-title>
      </v-list-item-content>
    </v-list-ite>


     </v-card>
          </v-col>

        </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

脚本：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    inputValue:'',
    itemsInDropdown:['a','b','c','d','e','ab','cd','ea']
  }),
  methods:{
    tester:function(){
      this.itemsInDropdown = this.itemsInDropdown.filter((x)=>{
     if(x.includes(this.inputValue)){ 
        return true
        } 
        else{return false}
      })
    }
  }

})

标签： vue.jsvuejs2vue-componentvuexvuetify.js

解决方案

computed在这种情况下最好使用：

  1. 用这个替换方法：
computed:{
    itemsInDropdownFiltered:function(){
         return this.itemsInDropdown.filter((x)=>{
              return x.includes(this.inputValue);
         });
    }
}
  1. 将要渲染的数组从 更改itemsInDropdown为itemsInDropdownFiltered，如下所示：
<v-list-item-content v-for="item in itemsInDropdownFiltered" :key="item">

推荐阅读