Question

我第一次使用Vuex。我在 $ store.state 中有两个数组，一个数组具有 cart [] 空数组，另一个数组具有 Lessons [] ，其内部具有课程参数它。

[{"lessonID":1003,"lessonTitle":"Lessons","lessonActivity":"English","lessonLocation":"Kensington","lessonPrice":"80","lessonAvailability":5}]

但是很遗憾，没有显示任何内容，也没有显示任何错误。只是为了确认我没有在计算属性中添加任何内容，也没有在<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>标签中添加任何内容。请帮助我：/

Answer 1

假设$store.state.cart.join()是正确的并返回您所说的数组中的单个对象，则可以将计算所得的属性添加为：

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

然后在模板中不需要v-for，但是您需要：

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

然后再次，我没有看到数组中的Title属性返回，但是我认为给出的代码是正确的。

Answer 2

您是否注意到外部<div>没有关闭？

<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>

Answer 3

所以@catmal是正确的，但是我只需要显示$ store.state.cart.Activity
但是使用@catmal解释，然后按照我的定义写入参数

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

然后 <div class="col-7 bg-secondary" v-for="car in cart"> <p>asd {{ car.lessonID }} </p> 这是错误的，因为例如我试图显示car.id（它在store.js中是这样定义的

感谢您的帮助

Vue + Vuex无法从状态获取值

3 个答案: