CODEWITHSUNDEEP
javascriptarraysvue.jsobjectvuex
mxignas
mxignas

Reputation: 37

Vue + Vuex not getting values from state

its my first time using Vuex. I have my 2 arrays in the $store.state, one with cart[] empty array and another one Lessons[] with lesson parameters inside it.

I consol'ed log it and it succesfully adding new lessons to cart $store.state.cart.join() gives me this output: [{"lessonID":1003,"lessonTitle":"Lessons","lessonActivity":"English","lessonLocation":"Kensington","lessonPrice":"80","lessonAvailability":5}]

So how i can get this info in another component? I have tried to do this: 

<div class="col-7 bg-secondary" v-for="(lesson, id) in $store.state.cart" :key="lesson.id">
                <div class="card" >
                    <img :src="$store.state.cart.url" alt="" class="card-img-top img-fluid">
                    <div class="card-body">
                        <h3 class="card-title">{{ $store.state.cart[id].Title }}</h3>
                        <ul class="list-group list-group-flush">
                        <li class="list-group-item">Subject: {{ $store.state.cart.Activity }} </li>
                        <li class="list-group-item">Location: {{ $store.state.cart.Location }} </li>
                        <li class="list-group-item">Price: {{ $store.state.cart.Price }} </li>
                        <li class="list-group-item text-danger">Availability: {{ $store.state.cart.Availability }} </li>
                        </ul>
                    </div>

but unfortunatelly nothing is shown and neither any errors is shown. Just to confirm I have added nothing in computed properties or anything in <script> tag. Please help me :/

Upvotes: 0

Views: 97

Answers (3)

mxignas
mxignas

Reputation: 37

So @catmal, was kind of correct, but i just needed to display not $store.state.cart.Activity
but use @catmal explanation and then write parameter as i defined it

 computed: {
            cart() {
                return this.$store.state.cart;
            }
        }

and then <div class="col-7 bg-secondary" v-for="car in cart"> <p>asd {{ car.lessonID }} </p> It was wrong because i was trying to display car.id for example (it was defined like this in my store.js

thanks for the help

Upvotes: 0

Yutong Zhang
Yutong Zhang

Reputation: 9

Did you notice that your outer <div> is not closed?

<div class="col-7 bg-secondary" v-for="(lesson, id) in $store.state.cart" :key="lesson.id">
                <div class="card" >
                    <img :src="$store.state.cart.url" alt="" class="card-img-top img-fluid">
                    <div class="card-body">
                        <h3 class="card-title">{{ $store.state.cart[id].Title }}</h3>
                        <ul class="list-group list-group-flush">
                        <li class="list-group-item">Subject: {{ $store.state.cart.Activity }} </li>
                        <li class="list-group-item">Location: {{ $store.state.cart.Location }} </li>
                        <li class="list-group-item">Price: {{ $store.state.cart.Price }} </li>
                        <li class="list-group-item text-danger">Availability: {{ $store.state.cart.Availability }} </li>
                        </ul>
                    </div>
</div>

Upvotes: 0

catmal
catmal

Reputation: 1758

Assuming $store.state.cart.join() is correct and returns what you say, a single object in array, you can add a computed property as:

<script>
export default {
    computed: {
      lesson() {
      return $store.state.cart.join()[0]
    }
}
</script>

Then in your template don't need v-for but you do:

<h3 class="card-title">{{ lesson.Title }}</h3>

Then again, I don't see Title attribute in the array returned but I assume it's correct given the code provided.

Upvotes: 1

Related Questions