Блог

Я создаю поисковый ввод с помощью Vue, и я создал метод, чтобы проверить, должен ли каждый элемент быть видимым или нет, и сравнить текущий пользовательский ввод с данными элемента, и вернуть значение true или false. Проблема у меня с консолью, она показывает мне ошибку, связанную с «прописными буквами». пожалуйста, немного помощи и совета. Заранее спасибо.

 <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);
 }
}
 

Похоже itemVisible(item) , что функция должна была быть помещена внутрь methods объекта, но в этом случае она, вероятно, не будет работать так, как вы ожидали, потому что она будет выполнена только один раз при первоначальном рендеринге.

Вероятно, вы хотите watch указать inputValue параметр, а затем перейти и выполнить itemVisible() метод для каждого элемента selectedItems и сохранить данные о видимости непосредственно в элементе или в параллельной структуре данных.

Я бы сделал что — то подобное.

 <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 на шаблон, а li на div

 <template ...loop... > <div class="..."> {{ item.name }} </div> </template>