list page
<template>
<div class="ind">
<dl v-for="list in tabLists">
<dt><img :src="list.img" alt=""></dt>
<dd><b>{{list.nm}}</b></dd>
<button @click="pushDetail(list.id)"></button>
</dl>
</div>
</template>
<script>
import axios from "axios"
export default {
name: "app",
data() {
return {
tabLists: []
}
},
mounted() {
this.getJson();
},
methods: {
getJson() {
const url = "http://localhost:8080/api"
axios.get(url).then(res => {
console.log(res);
this.tabLists = res.data.movieList;
});
},
//
pushDetail: function(id) {
this.$router.push({
name: "Detail",
params: {
id
}
})
}
},
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
ul,
li,
ol {
list-style: none;
}
.ind {
width: 100%;
}
.ind dl {
display: flex;
}
.ind dl dd {
flex: 1;
}
.ind dl dt {
flex: 1;
}
button {
width: 50px;
height: 40px;
}
</style>
details page
<template>
<div class="detail">
<dl v-for="(list,index) in detailData" :key="index">
<dt>
<img :src="list.avatar">
</dt>
<dd>
<h2>{{list.title}}</h2>
</dd>
</dl>
</div>
</template>
<script>
import axios from "axios";
export default {
name:"detail",
data(){
return {
id : 0,
allData : [],
detailData: []
}
},
mounted() {
this.id=this.$route.params.id;
axios.get("http://localhost:8080/static/data.json").then( res => {
this.allData = res.data.data;
this.detailData = this.allData.filter((v,i) => {
return v.id == this.id;
})
})
},
}
</script>
<style>
.detail{
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.detail h2{
padding-top: 10px;
}
</style> browser error
