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

news2024/12/29 10:07:09

在这里插入图片描述
在这里插入图片描述

下面是详情页 通过 接收

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/831646.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

STM32CubeMX配置定时器PWM--保姆级教程

———————————————————————————————————— ⏩ 大家好哇&#xff01;我是小光&#xff0c;嵌入式爱好者&#xff0c;一个想要成为系统架构师的大三学生。 ⏩最近在开发一个STM32H723ZGT6的板子&#xff0c;使用STM32CUBEMX做了很多驱动&#x…

原型链污染分析

原型链污染问题 原型链原型的继承原型链污染 原型链 原型的继承 先创建一个对象&#xff0c;查看一下属性 const obj { prop1: 111, prop2: 222,} 这里的Object.prototype就是对象的原型。 原型里面有许多的属性&#xff0c;这里面的constructor是我们需要着重关注的。 除此…

刷题DAY15

第一题 给定一个数组arr 求子数组最大累加和 最暴力的 枚举每一个子数组 出结果 优化解 用一个cur指针保存累加和 每次cur变大 就用它更新max 如果cur累加到0以下 回复成0 假设答案法 假设我们最大的子数组是i 到 j位置上的 那么这个i 到j 之间 必不存在一个k使i...k累加和…

WEB:xff_referer

前提知识 xxf referer 题目 直接在请求头里添加&#xff0c;然后重放后显示内容为 修改referer payload Referer:https://www.google.com 得到flag

运营干货!如何自查亚马逊品牌是否存在滥用情况?

做了这么多年亚马逊&#xff0c;说到底还是没办法摸透亚马逊的脾气。比如亚马逊的推荐算法&#xff0c;也就是大家经常讨论的A9算法。为什么总是没办法摸透亚马逊的想法呢&#xff1f; 毕竟“游戏规则”是由亚马逊来制定&#xff0c;作为参与者只能按照游戏规则去参与游戏&…

【LeetCode-中等】剑指 Offer 35. 复杂链表的复制(详解)

目录 题目 方法1&#xff1a;错误的方法&#xff08;初尝试&#xff09; 方法2&#xff1a;复制、拆开 方法3&#xff1a;哈希表 总结 题目 请实现 copyRandomList 函数&#xff0c;复制一个复杂链表。在复杂链表中&#xff0c;每个节点除了有一个 next 指针指向下一个节…

【Spring】创建一个Spring项目与Bean对象的存储

目录 一、创建Spring项目 1、创建Maven项目 2、配置maven国内源 3、引入spring依赖 4、添加启动类 二、将Bean对象存储到Spring&#xff08;IoC容器&#xff09; 1、创建Bean对象 2、将Bean存储到spring&#xff08;容器&#xff09;中 3、获取Bean对象 3.1、Applicatio…

C++ | 位图与布隆过滤器

目录 前言 一、位图 1、位图的引入 2、位图的实现 &#xff08;1&#xff09;基本结构 &#xff08;2&#xff09;构造函数 &#xff08;3&#xff09;插入数据 &#xff08;4&#xff09;删除数据 &#xff08;5&#xff09;是否存在 3、位图的优缺点 4、位图的应用…

js-匈牙利算法

匈牙利算法 素数伴侣新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个注脚注释也是必不可少的K…

TSINGSEE青犀视频汇聚平台EasyCVR视频广场面包屑侧边栏支持拖拽操作

TSINGSEE青犀视频汇聚平台EasyCVR可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有GB28181、RTSP/Onvif、RTMP等&#xff0c;以及厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等&#xff0c;能对外分发RTSP、RTMP、FLV、HLS、Web…

第七章:SpringMVC中

第七章&#xff1a;SpringMVC中 7.1&#xff1a;SpringMVC的视图 ​ SpringMVC中的视图是View接口&#xff0c;视图的作用渲染数据&#xff0c;将模型Model中的数据展示给用户SpringMVC视图的种类很多&#xff0c;默认有转发视图和重定向视图。 ​ 当工程引入jstl的依赖&…

react中PureComponent的理解与使用

一、作用 它是一个纯组件&#xff0c;会做一个数据的浅比较&#xff0c;当props和state没改变的时候&#xff0c;不会render重新渲染&#xff0c; 改变后才会render重新渲染&#xff0c;提高性能。 二、使用 三、注意 它不能和shouldComponentUpdate生命周期同时使用。因为它…

【网络基础进阶之路】路由器间的静态综合详解

PS&#xff1a;本实验基于华为的eNSP模拟软件进行 题目内容&#xff1a; 完成步骤&#xff1a; 1、对192.168.1.0/24进行子网划分 2、对每一个路由器进行IP的配置 3、开始静态路由的书写&#xff0c;在写之前&#xff0c;我们可以先对每一个路由器写一条通向右边的缺省路由&…

如何解决跨域问题?

一&#xff0c;什么是跨域 域&#xff08;Origin&#xff09;是由协议、域名和端口组成的&#xff0c;只有这三者完全一致的情况下&#xff0c;浏览器才会认为两个网址同源&#xff0c;否则就认为存在跨域。跨域是指在Web开发中&#xff0c;一个网页的JavaScript代码试图访问另…

机器学习实战13-超导体材料的临界温度预测与分析(决策树回归,梯度提升回归,随机森林回归和Bagging回归)

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下机器学习实战13-超导体材料的临界温度预测与分析(决策树回归,梯度提升回归,随机森林回归和Bagging回归)&#xff0c;这几天引爆网络的科技大新闻就是韩国科研团队宣称发现了室温超导材料-LK-99&#xff0c;这种材料…

读MetaGait代码

前置问题 关于分布式&#xff0c;可能是系统、网络等问题我最终还是取消掉了&#xff0c;下面这些尝试使用分布式时报的错姑且记录一下。。。 ############################## module ‘distutils’ has no attribute ‘version’ pip install setuptools59.5.0 No module …

数智保险 创新未来 | GBASE南大通用亮相中国保险科技应用高峰论坛

本届峰会以“数智保险 创新未来”为主题&#xff0c;GBASE南大通用携新一代创新数据库产品及金融信创解决方案精彩亮相&#xff0c;与国内八百多位保险公司高管和众多保险科技公司技术专家&#xff0c;就保险领域数字化的创新应用及生态建设、新一代技术突破及发展机遇、前沿科…

算法通关村—括号匹配问题解析

1. 有效的括号 给定一个只包括 ‘(’&#xff0c;‘)’&#xff0c;‘{’&#xff0c;‘}’&#xff0c;‘[’&#xff0c;‘]’ 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。…

网易云音乐扫码登录

简介 尚硅谷的网易云音乐项目无法登录&#xff0c;因为目前网易修改了接口使用手机号和密码登录的话需要先通过认证才可以&#xff0c;所以目前无法使用手机号登录&#xff0c;只能使用二维码登录&#xff0c;接下来我就教大家如何使用 二维码进行登录 实现步骤 1.获取nodejs接…

【Spring Cloud 四】Ribbon负载均衡

Ribbon负载均衡 系列文章目录背景一、什么是Ribbon二、为什么要有Ribbon三、使用Ribbon进行负载均衡服务提供者A代码pom文件yml配置文件启动类controller 服务提供者Bpom文件yml配置文件启动类controller 服务消费者pom文件yml文件启动类controller 运行测试 四、Ribbon的负载均…