1

我正在使用 Vue 创建一个搜索输入，并且我创建了一个方法来检查每个项目是否应该可见，并将当前用户输入与项目的数据进行比较，并返回 true 或 false。我遇到的控制台问题，它显示了一个与“toLowerCase”相关的错误。请提供一些帮助和建议。提前致谢。

<div
  v-for="item in itemList"
  :key="item.name"
  class="dropdown-item"
  v-show="itemVisible(item)"
 />

export default {
  name: "Demo",
  data() {
    return {
      inputValue: "",
      itemList: [],
      selectedItem: {},
    };
  },
itemVisible(item) {
  let currentName = item.name.toLowerCase();
  let currentInput = this.inputValue.toLowerCase();
  return currentName.includes(currentInput);
 }
}
4

2 回答 2

0

我会做这样的事情。

<template>
    <ul v-for="(item, idx) in itemList" :key="`key-${idx}`">
        <li class="dropdown-item" v-show="itemVisible(item)">
            {{ item.name }}
        </li>
    </ul>
</template>
<script>
export default {
    name: "Demo",

    data() {
        return {
            inputValue: "i",
            itemList: [
                { name: 'hi' },
                { name: 'by' },
            ],
            selectedItem: {},
        };
    },

    methods() {
        itemVisible(item) {
            let currentName  = item.name.toLowerCase();
            let currentInput = this.inputValue.toLowerCase();
            return currentName.includes(currentInput);
        }
    }
}
</script>

如果你不想要 ul/li，你可以用模板交换 ul，用 div 交换 li

<template ...loop... > <div class="..."> {{ item.name }} </div> </template>
于 2021-10-13T20:40:33.973 回答
0

看起来该itemVisible(item)函数应该已放入methods对象内部，但事件可能无法按您的预期工作，因为它只会在初始渲染时执行一次。

您可能想要参数，然后在每个项目上执行该watch方法，并将有关可见性的数据直接保存到项目或并行数据结构中。inputValueitemVisible()selectedItems

于 2021-10-08T17:06:45.883 回答