these three components are:
layer 1 pages/Home
layer 2 components/travelList
layer 3 components/travel
Home:
<template>
<div class="home">
<travel-list :travelList = "travelListIndex"></travel-list>
</div>
</template>
<script>
import travelList from "@/components/travelList"
export default {
components:{
"travel-list":travelList
},
data(){
return {
travelListIndex: [] //
}
},
created() {
if (this.travelListIndex.length == 0) {
this.$store.dispatch("getTravelsList");
}
},
computed:{
...mapGetters(["travelListIndex"])
}
}
</script>travelListIndex this error has been reported since initialization, including when switching the tabbar menu:
store- > travel.js action has definitions getTravelsList () and getter as well as travelListIndex
travelList
<template>
<div class="travel-list">
<travel v-for="(item,index) in travelList" :key="index" :travel="item"></travel>
</div>
</template>
<script>
import travel from "@/components/travel"
export default {
data(){
return{}
},
props: ["travelList"], //
comments:{
travel
}
}
</script>travel
<template>
<div class="travel">
<router-link :to="{ path: "/travel/"+ travel.objectId }">
<div class="A-cimg">
<img :src="travel.travelPic" alt="">
<span class="i-activity p-free"></span>
<span class="i-activity p-number">{{travel.joinNum}}</span>
<span class="activity-s activity-s-1"></span>
</div>
<div class="A-info">
<div>
<span class="title">{{travel.title}}</span>
<span class="see"><i class="icon"></i>{{travel.clicks}}</span>
</div>
<div>
<span class="username">{{travel.releaseUsername}}</span>
<span class="time">{{travel.releaseTime | formatTime}}</span>
</div>
</div>
</router-link>
</div>
</template>
<script>
export default {
data(){
return {}
},
props:["travel"]//
}
</script>