时间戳

首页 > 解决方案 > 如何在输入值更改时动态显示数组？

javascript - 如何在输入值更改时动态显示数组？

问题描述

我有一个div 我正在显示来自对象数组的组件。在上面div我有一个input[type=text]将根据我将插入的内容过滤显示的数据。它看起来像这样：

 <div class="filters">
            <input type="search" placeholder="Szukaj specjalisty" 
                   :onchange="filterAllSpecialists">
            <FilterData/>
        </div>
        <div class="all-fields">
            <SpecialistPreview class="specialist-preview"
                               v-for="(talk, index) in newTalks"
                               :key="index"
                               :name="talk.name"
                               :speciality="talk.speciality"
                               :hourly-price="talk.hourlyPrice"
                               :half-hour-price="talk.halfHourPrice"
                               :avatar="talk.avatar"
                               :rating="talk.rating"
                               :is-available="talk.isAvailable"
            >{{ talk }}
            </SpecialistPreview>
        </div>

我创建了一个获取输入值并与namefromnewTalks数组进行比较的方法：

<script>
export default {

data() {
    return {
        talks: [
            {
                name: 'Małgorzata Karwacka-Lewandowska',
                speciality: 'Coach',
                hourlyPrice: 150,
                halfHourPrice: 80,
                avatar: 'patrycja.jpg',
                rating: 2.5,
                isAvailable: true
            },
            ... more objects
        ],

        newTalks: []
    }
},
methods: {
    filterAllSpecialists(e) {

        let input = e.target.value;
        if (input !== '') {
            this.newTalks = this.talks.filter(el => 
 el.name.toLowerCase().includes(input.toLowerCase()))
            console.log(this.newTalks);
            return this.newTalks;
        } else {
            return this.newTalks;
        }

    }
},
mounted() {
    this.newTalks = this.talks;
}

}

我得到的只是Uncaught SyntaxError: Function statements require a function name在console

标签： javascriptinputfilternuxt.jsv-for

解决方案

由于没有人回答，而且我花了更多时间找出我的代码出了什么问题，我发现我犯的第一个错误是我没有使用@我以前使用:过的onchange（我决定出于我的目的我需要@keyup而不是@change）。还有一种更简单的定位input值的方法 - 只需添加一个v-model='allSpecialistInput.

所以现在在模板中它应该是这样的：

<div class="filters">
            <input type="search" placeholder="Szukaj specjalisty" v-model="allSpecialistsInput" 
                   @keyup="filterAllSpecialists">
            <FilterData/>
        </div>
        <div class="all-fields" v-cloak>
            <SpecialistPreview class="specialist-preview"
                               v-for="(coach, index) in newCoaches"
                               :key="index"
                               :name="coach.name"
                               :speciality="coach.speciality"
                               :hourly-price="coach.hourlyPrice"
                               :half-hour-price="coach.halfHourPrice"
                               :avatar="coach.avatar"
                               :rating="coach.rating"
                               :is-available="coach.isAvailable"
            >{{ coach }}
            </SpecialistPreview>
        </div>

methods我需要改变的只是函数中的第一行， 如下filterAllSpecialists所示：

filterAllSpecialists() {
        let input = this.allSpecialistsInput;  <--- here
        if (input !== '') {
            this.newCoaches = this.coaches.filter(el => el.name.includes(input.toLowerCase()))
            return this.newCoaches;
        } else {
            return this.newCoaches;
        }
    },

推荐阅读