Vue/Vuex Accessing Objects elements

Question

Hi I am getting confused as to how I can access some data within my Object. I am using Vuex and I have a standard page. Here, I use a getter to obtain the Payment Object and pass it to a component.

<template>
    <div>
        <div class="container">
            <div class="row">
                <div class="col-12 flex">
                    <payment-details :payment="payment"></payment-details>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import {
        PaymentDetails
    } from "@/components/Payment";

    export default {
        components: {
            'payment-details': PaymentDetails
        },
        created () {
            if (!this.payment.paymentID) {
                this.$store.dispatch('paymentById', this.$route.params['id'])
            }
        },
        computed: {
            payment () {
                return this.$store.getters.paymentById(this.$route.params['id'])
            }
        }
    }
</script>

Now within the component, within the template, I can do something like this

<template>
    <div v-if="payment">
        <div class="row">
            <div class="col-12">
                <h3 class="h-100">{{ payment.details }}</h3>
            </div>
        </div>
    </div>
</template>

This all works fine. However, within this component, I need to access some elements of the payment object. This is where I get confused, if I create a mounted or created hook and do this

created() {
    console.log(this.payment)
}

I always get an Observer object. If I try accessing an element from this Object e.g.

created() {
    console.log(this.payment.details)
}

I get undefined. I basically have a slideshow I am creating in a mounted hook. I need to push some items contained within this Object onto the slideshow array.

So how can I actually get access to the elements of this Object?

Thanks

tony19 · Accepted Answer · 2022-07-15 02:00:18Z

1

You should use watcher on your vuex object.

Here is link to documentation https://v2.vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property

Most probably your this.payment.details is instantiated after your created method was called.

Move your code from created method to:

export default {
    watch: {
      payment: function (val) {
        console.log('-------- this is this.payment.details:');
        console.log(val.details);
      },
    ...

edited Jul 15, 2022 at 2:00

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 19, 2020 at 15:56

webprogrammer

2,4733 gold badges22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Qonvex620 · Accepted Answer · 2020-01-19 16:42:29Z

0

Yes it will gave you of undefined because in your props you declare only a payment object alone not like this one below.

payment : {
  details: '',
  etc: ''
}

But it will still works when you use this payment data in your component, it's like it only gives you an error something like 'calling details on null' like that. I prefer to put condition first if payment has already data before you call in your component. Like below

<div v-if="payment.details">{{payment.details}}</div>

answered Jan 19, 2020 at 16:42

Qonvex620

3,9801 gold badge12 silver badges17 bronze badges

Collectives™ on Stack Overflow

Vue/Vuex Accessing Objects elements

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related