...is not a function

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

A nie powinno być przypadkiem getData().filter?

anonimowy napisał(a):

A nie powinno być przypadkiem getData().filter?

Sprawdzałem, nadal to samo

Za pierwszym razem działa, po odświeżeniu wywala błąd

anonimowy napisał(a):

A nie powinno być przypadkiem getData().filter?

Nie powinno, bo getData to computed property.

Nindzia napisał(a):

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

Jesteś pewien że getter getData zwraca array zawsze? Dopisz sobie w kodzie słówko debugger; (jeśli umiesz korzystać z debuggera) lub po prostu wstaw console.log(this.getData) i upewnij się że to jest array.

TomRiddle napisał(a):

Nindzia napisał(a):

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

Jesteś pewien że getter getData zwraca array zawsze? Dopisz sobie w kodzie słówko debugger; (jeśli umiesz korzystać z debuggera) lub po prostu wstaw console.log(this.getData) i upewnij się że to jest array.

Tak, to tablica obiektów

Nindzia napisał(a):

Tak, to tablica obiektów

W obu przypadkach? Bo wiesz, tablice mają funkcję filter(), więc to co się znajduję pod this.getData raczej nie może być arrayem, skoro dostajesz this.getData.filter is not a function.

TomRiddle napisał(a):

Nindzia napisał(a):

Tak, to tablica obiektów

W obu przypadkach? Bo wiesz, tablice mają funkcję filter(), więc to co się znajduję pod this.getData raczej nie może być arrayem, skoro dostajesz this.getData.filter is not a function.

Sprawdzę jeszcze raz jak będę w domu

Jeżeli getData okaże się tablicą (ale dlaczego miałoby mieć nazwę jak funkcja?), możesz jeszcze zobaczyć, czy this jest odpowiednie. Nie używałem Vue, ale wiem tyle, że this może mieć najróżniejsze wartości w zależności od kilku kryteriów.

Silv napisał(a):

Jeżeli getData okaże się tablicą (ale dlaczego miałoby mieć nazwę jak funkcja?)

Bo to jest funkcja - funkcja która zwraca tablicę.

Silv napisał(a):

No, to w powyższym kodzie nie widzę tego wywołania.

@TomRiddle: w jakim sensie to jest wywołanie metody getData?

Silv napisał(a):

@TomRiddle: w jakim sensie to jest wywołanie metody getData?

https://lmgtfy.com/?q=vue+computed+property

Rozwiązałem problem, okazało się, że w Vuex do tablicy wpisywałem za każdym razem nową tablicę zamiast obiektu. Dzięki za pomoc!

@Silv: > Robi to Vue, OK.
To zwykły getter z >=ES6

class Test {
  // ...
  get getData() {
    return this.data;
  }
}