Piszę apkę, w której pobieram dane z api i wyświetlam je, używam do tego vuex, na stronie wyświetlam pasek wyszukiwania z metodą:
<div class="panel panel-default">
<input
class="form-control"
type="text"
placeholder="Search"
aria-label="Search"
v-model="filterText">
<div class="panel-body records"
v-for="record in filterData"
>
<p>{{record.name}}</p>
<img :src="record.img" alt="">
</div>
</div>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
job: '',
artistData: '',
img: '',
filterText: '',
}
},
created() {
this.$store.dispatch('fetchAlbums'); // pobieranie z api, commit na zapis do state
},
computed: {
...mapGetters([
'getData',
]),
filterData() {
return this.getData.filter((element) => {
return (element.name.match(this.filterText));
});
}
},
}
</script>
Na początku wszystko działało jak należy, potem w konsoli logował się błąd:
[Vue warn]: Error in render: "TypeError: this.getData.filter is not a function"
Już sam nie wiem co mam z tym zrobić, bo działa jak chce :D