Click the submit button of the first picture to jump to the second page and want to transfer the product information selected in figure 1 to figure 2. How to write the code?
what is the relationship between the pages in figure 1 and figure 2? What is used to complete the data transfer?
<el-button type="primary" @click.stop="onOrder"><router-link to="/book/bookMoney"></router-link></el-button>
Page 1:
<template>
<div>
<bread-crumb :bread-crumb-list="breadCrumbList"></bread-crumb>
<ul>
<li class="bookItem" v-for="item in bookList" :key="item.id" style="text-align: left;">
<el-checkbox-group v-model="checkList" @change="handleCheckedBooks">
<el-checkbox :label="item.id">
<img class="bookImg" :src="item.book_url" style="width: 100px; height: 100px;">
<h3>{{item.book_title}}</h3>
<span class="price">{{item.book_price}}</span>
<div>
<el-input-number v-model="item.num" size="small" @change="handleChange" :min="0"></el-input-number>
</div>
</el-checkbox>
</el-checkbox-group>
</li>
</ul>
<div class="cart">
<span></span>
<span class="highLight">{{mount}}</span>
<span></span>
<el-button type="primary" @click.stop="onOrder"><router-link to="/book/bookMoney"></router-link></el-button>
</div>
</div>
</template>
<script>
import BreadCrumb from "@/components/common/BreadCrumb"
import bookMoney from "@/book/bookMoney"
export default {
components: {
BreadCrumb,
bookMoney
},
data () {
return {
checkAll: false,
isIndeterminate: true,
breadCrumbList: [],
bookList: [],
radio: "0",
checkList: [],
num: 1,
mount: 0,
total: 0
}
},
mounted () {
this.breadCrumbList = [
{title: ""},
{title: ""},
{title: ""}
],
this.bookList = [{
id: "0",
book_url: require("../assets/images/book1.jpg"),
book_title: "",
book_price: "39",
num: 0
},{
id: "1",
book_url: require("../assets/images/book2.jpg"),
book_title: "",
book_price: "45",
num: 0
},{
id: "2",
book_url: require("../assets/images/book3.jpg"),
book_title: "",
book_price: "59",
num: 0
},{
id: "3",
book_url: require("../assets/images/book4.jpg"),
book_title: "",
book_price: "30",
num: 0
},{
id: "4",
book_url: require("../assets/images/book5.jpg"),
book_title: "",
book_price: "25",
num: "0"
},{
id: "5",
book_url: require("../assets/images/book6.jpg"),
book_title: "",
book_price: "69",
num: 0
}
]
},
methods: {
onOrder () {
},
handleCheckedBooks () {
console.log(this.checkList)
this.checkList.forEach((item) => {
console.log(item)
this.bookList.forEach((val) => {
if (val.id === item) {
}
})
})
this.checkList = value
console.log(444)
console.log(this.checkList)
},
handleChange (val) {
this.mountPP
this.$nextTick(function () {
this.checkList.forEach((item) => {
this.bookList.forEach((obj) => {
if (obj.id === item) {
this.total = val * obj.book_price
}
})
})
})
},
}
}
</script>