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

Posted 2023-02-22

【中文标题】您能帮我解决我的 vue 代码中的落后问题吗？

【英文标题】：Can you please help me with my on step behind issue in my vue code?

【发布时间】：2020-08-26 08:59:54

【问题描述】：

我有一个关于我的 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-
    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
         
        elsereturn false
      )
    
  

)

【问题讨论】：

我试图从标题中删除诉状，并将其替换为问题摘要，但我不确定我是否理解这是在说什么。 “Vue 代码的问题”能否更具体一些？

【参考方案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">