Не могу отфильтровать JSON во Vue?

Question

[anton_trofimov95]

Есть рабочий фильтр, я его сделал с обычным массивом - Ссылка
Пытаюсь сделать то же самое с JSON форматом, ниже код

<div id="app">
        <h1>Рейтинг участников:</h1>
        <div v-for="item in filteredList" :key="item.Id">
            <span>{{item.id}}</span>
            <span>{{item.name}}</span>
            <span>{{item.secondName}}</span>
            <span>Возраст: {{item.age}}</span>
            <span>Рейтинг: {{item.rating}}</span>
        </div>
        <p>Поиск по имени <input type="text" v-model="userName" /></p>
        <p><input type='checkbox' @change="sortAgeMethod" v-model="sortAge" />
            <label>Отсортировать по возрасту</label></p>
    </div>

var app = new Vue({
    el: '#app',
    data: {
        userName: '',
        sortAge: false,
        info: []
    },
    methods: {
        sortAgeMethod() {
            this.info.sort((a, b) => {
                if (this.sortAge) {
                    return b.age - a.age
                } else {
                    return a.age - b.age
                }
            })
        }
    },
    computed: {
        filteredList() {
            return this.info.filter(elem => elem.userName.toLowerCase().indexOf(this.userName.toLowerCase()) !== -1)
        }
    },
    mounted() {
        axios
            .get('./users.json')
            .then(response => (this.info = response.data.users))
            .catch(e => {
                console.error(e)
            })
    }
});

При попытке отрисовки в консоли выдает ошибку. Если выводить <div v-for="item in info" :key="item.Id"> то все работает (т.е. выводится массив JSON на экран, но нам надо другое). По принципу vue нужно выводить именно то computed свойство filteredList, чтобы применялся фильтр. В итоге навеяло мысль, что я не правильно фильтрую JSON формат, т.е. его надо как-то по-другому фильтровать, не как обычный массив. Или может нет. Можете подсказать, что не так или куда смотреть?

Answer 1

[NerVik]

что-то мне подсказывает, что у тебя в JSON нет поля `userName` и вместо него в

filteredList() {
            return this.info.filter(elem => elem.userName.toLowerCase().indexOf(this.userName.toLowerCase()) !== -1)
        }

нужно написать

filteredList() {
            return this.info.filter(elem => elem.name.toLowerCase().indexOf(this.userName.toLowerCase()) !== -1)
        }

во всяком случае этот вывод я делаю исходя из того, что userName Нигде не выводится в шаблоне

Comments

[anton_trofimov95]

Ух спасибо, верно сказали. У меня не совпадали имена в data и в json'e, а в кодпене совпадало и выдавало ошибку. Щас поправил и всё норм