卡片的点击事件通过点击进行路由传参

quanmeiren

于 2023-08-03 17:10:48 发布

阅读量177

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/quanmeiren/article/details/132087977

版权

在这里插入图片描述

下面是详情页通过接收

<template>
    <div class="detail">
        <img :src="row.imgUrl">

        <van-icon name="arrow-left" @click="back" />
    </div>
</template>

<script>
export default {
    created() {
        let id = Number(this.$route.query.id);
        this.foodList.forEach(v => {
            v.foods.forEach(v2 => {
                if (v2.id === id) {
                    this.row = v2;
                }
            })
        })
    },

    data() {
        return {
            row: null,
        }
    },

    methods: {
        back() {
            this.$router.back();
        }
    },

    computed: {
        foodList() {
            return this.$store.state.foodList;
        }
    }
}
</script>

<style lang="less" scoped>
.detail {
    img {
        width: 100%;
    }
}

.van-icon-arrow-left {
    position: absolute;
    left: 10px;
    top: 10px;

    color: #fff;
    font-size: 40px;
}
</style>