1

I am currently trying to learn Vue JS without ever having encountered Javascript.

All the brackets, arrows, etc. are driving me crazy.

With the Composition API, I come across a question that I can't successfully google.

That's working:

setup() {
    const store = useStore ();
    const packagingdata = ref ([]);
    const loadpackagingdata = async () => {
      await store.dispatch (Actions.LOADPACKAGING_LIST, 10);
      packagingdata.value = store.getters.getPackagingData;

return {
      packagingdata,
}

I can access {{packagingdata}}. That contains an array.

{{Packagingdata.products}} does work but {{packagingdata.products [0]}} doesn't work.

But when I add it to the setup () like this:

setup() {
        const store = useStore ();
        const packagingdata = ref ([]);
        const getProducts = ref ([]);
        const loadpackagingdata = async () => {
            await store.dispatch (Actions.LOADPACKAGING_LIST, 10);
            packagingdata.value = store.getters.getPackagingData;
            getProducts.value = store.getters.getProducts;      
        };
    return {
        packagingdata,
        getProducts
    }

then {{ getProducts }} returns what I wanted even if the getter function only is like this:

get getAddress() {
    return this.packagingdata["products"][0];
  }

What is happening there? What am I doing wrong? I would prefer to not create a ref() and getterfunction for every computed value. Whats the solution with computed?

best regards

Rune
  • 61
  • 5
  • In components, we typically create a computed for each getter you want to consume. – Lucas David Ferrero Jan 13 '22 at 11:34
  • i tried again and probably get the syntax right const productdata = computed(() => { return store.getters.getProduct; }); but the computed fires before my packagingdata are loaded, although i worked with sync/await on the packagingdata-loadingaction. thats why i get errors for "key not exists in object". – Rune Jan 13 '22 at 14:05
  • If you are serious about learning vue.js (or front-end development) I strongly suggest that you should start by learning the fundamentals (html, css and javascript). Believe me, taking your time to learn the basics would immensely help you. – mo3n Feb 22 '22 at 05:10

1 Answers1

0

I found two methods to avoid the error.

  1. add a v-if="mygetter.length" in the template
  2. check in the getter whether the variable is set and otherwise return false

Both of these prevent an error already occurring when the page is loaded that [0] cannot be found

Rune
  • 61
  • 5