时间戳

首页 > 解决方案 > 从 vuejs 中的搜索中选择数据时出错？

javascript - 从 vuejs 中的搜索中选择数据时出错？

问题描述

  search:'',
 searchHistory: [],
  showSearchHistory: false,
  
  selectPreviousSearch(index) {
        this.search = this.searchHistory[index];
        this.showSearchHistory = false;
        
        
      },
      
<input
          class="form-control"
          id="SearchText"
          type="text"
          v-model="search"
          @keydown.enter="enter"
          @click="onClick"
          @keyup.enter="processSearch"
          @input="change"
          @keyup="inputChanged"
          @keydown.down="onArrow"
          @keydown.up="onArrow"
          
        />


        <ul class="list-inline" >
          
          <li
            class="list-inline-item list-group-item-primary"
            v-for="(item, index) in searchHistory
              .slice(-5)
              .reverse()
              .map((s) => s.trim())"
            :key="index"
            @click="selectPreviousSearch(index)"
          >
            {{ item }}
          </li>
        </ul>

以上是逻辑，如果我在搜索中添加任何内容并单击搜索按钮，数据将反映在下面的列表标签中。

现在的问题是，“selectPreviousSearch”（即来自 li 的数据）的 Onclick 准确数据未显示在搜索中。

例如，如果我在搜索中输入内容，即 a、b、c、d。数据反映在李中，但是当我点击 a 时，“a”应该显示在搜索中，但我在搜索中得到了一些不同的值，而不是“a”。

标签： javascriptvue.js

解决方案

那是因为您正在对searchHistory数组进行切片并仅获取最后 5 个元素，并且您还可以在此处反转数组：

        v-for="(item, index) in searchHistory
          .slice(-5)
          .reverse()
          .map((s) => s.trim())"

循环上的index值将是这个新数组的索引，所以当你这样做时：

this.searchHistory[index];

它不会得到正确的。

您可以在那里修复逻辑或执行以下操作：

this.search = this.searchHistory.slice(-5).reverse()[index];

更新

正如@Lawrence Cherone 在他的回复中指出的那样，你可以这样做：

@click="selectPreviousSearch(item)"

如果您需要this.search修剪的值，它会像那样工作得很好。

推荐阅读