Question

我对我的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}
      })
    }
  }

})

Answer 1

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

用以下方法替换方法：

computed:{
    itemsInDropdownFiltered:function(){
         return this.itemsInDropdown.filter((x)=>{
              return x.includes(this.inputValue);
         });
    }
}

如下所示，将要呈现的数组从itemsInDropdown更改为itemsInDropdownFiltered：

<v-list-item-content v-for="item in itemsInDropdownFiltered" :key="item">

您能否在我的vue代码中帮助我解决问题？

1 个答案: