Есть рабочий фильтр, я его сделал с обычным массивом -
Ссылка
Пытаюсь сделать то же самое с 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 формат, т.е. его надо как-то по-другому фильтровать, не как обычный массив. Или может нет. Можете подсказать, что не так или куда смотреть?
