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

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

下面是详情页 通过 接收

<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.mfbz.cn/a/57504.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2023年第四届“华数杯”数学建模思路 - 案例:随机森林

## 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 什么是随机森林&#xff1f; 随机森林属于 集成学习 中的 Bagging&#xff08;Bootstrap AGgregation 的简称&#xff09; 方法。如果用图来表示他们之…

喜报 | 《中国AIOps现状调查报告(2023)》发布!擎创科技案例再度入选

&#xff08;本文部分内容来自《中国AIOps现状调查报告&#xff08;2023&#xff09;》&#xff0c;丝小编扣1&#xff0c;领取完整版报告&#xff09; 2023年7月18日&#xff0c;信通院Xops产业创新发展论坛于北京成功举办。大会旨在提高企业研发运营水平&#xff0c;加强XOp…

【Linux】进程间通信——管道

目录 写在前面的话 什么是进程间通信 为什么要进行进程间通信 进程间通信的本质理解 进程间通信的方式 管道 System V IPC POSIX IPC 管道 什么是管道 匿名管道 什么是匿名管道 匿名管道通信的原理 pipe()的使用 匿名管道通信的特点 拓展代码 命名管道 什么是命…

问题:idea启动项目错误提示【command line is too long. shorten command line】

问题&#xff1a;idea启动项目错误提示【command line is too long. shorten command line】 参考博客 问题描述 启动参数过长&#xff0c;启动项目&#xff0c;错误提示 原因分析 出现此问题的直接原因是&#xff1a;IDEA集成开发环境运行你的“源码”的时候&#xff08…

java:解决报错非法字符: ‘\ufeff‘以及什么是BOM

背景 运行 JAVA 项目后&#xff0c;报错提示&#xff1a;非法字符: \ufeff&#xff0c;如图&#xff1a; 但是我在这个报错的文件中并没有搜到这个字符&#xff0c;那到底是什么原因 什么是BOM BOM&#xff08;Byte Order Mark&#xff09;&#xff0c;隐藏字符&#xff0c…

Pytorch深度学习-----神经网络之线性层用法

系列文章目录 PyTorch深度学习——Anaconda和PyTorch安装 Pytorch深度学习-----数据模块Dataset类 Pytorch深度学习------TensorBoard的使用 Pytorch深度学习------Torchvision中Transforms的使用&#xff08;ToTensor&#xff0c;Normalize&#xff0c;Resize &#xff0c;Co…

python与深度学习(十一):CNN和猫狗大战

目录 1. 说明2. 猫狗大战2.1 导入相关库2.2 建立模型2.3 模型编译2.4 数据生成器2.5 模型训练2.6 模型保存2.7 模型训练结果的可视化 3. 猫狗大战的CNN模型可视化结果图4. 完整代码5. 猫狗大战的迁移学习 1. 说明 本篇文章是CNN的另外一个例子&#xff0c;猫狗大战&#xff0c…

Go -- 测试 and 项目实战

没有后端基础&#xff0c;学起来真是费劲&#xff0c;所以打算速刷一下&#xff0c;代码跟着敲一遍&#xff0c;有个印象&#xff0c;大项目肯定也做不了了&#xff0c;先把该学的学了&#xff0c;有空就跟点单体项目&#xff0c;还有该看的书.... 目录 &#x1f34c;单元测试…

realsense-viewer 不识别 T265——Realsense SDK 在 v2.54.1 版本以后不再支持T265相机的解决办法

由于T265停产&#xff0c;Intel RealSense™ SDK 2.0 (v2.54.1) 在该版本中移除了对T265相机的支持&#xff0c;以后的版本也不会支持了。为了继续使用 T265 相机&#xff0c;最好千万不要升级 realsense 相关的 package&#xff0c;但是还有新装机的需求啊。经测试Intel RealS…

深度学习Redis(4):哨兵

前言 在 Redis&#xff08;3&#xff09;&#xff1a;主从复制 中曾提到&#xff0c;Redis主从复制的作用有数据热备、负载均衡、故障恢复等&#xff1b;但主从复制存在的一个问题是故障恢复无法自动化。本文将要介绍的哨兵&#xff0c;它基于Redis主从复制&#xff0c;主要作…

js中exec与match的区别

const regex1 RegExp(f(o.?),g); const str1 table foatball, fobsball; let array1; let array2; array1 regex1.exec(str1) array2 str1.match(regex1)console.log(array1, array1); console.log(array2, array2); //没有g的情况下,都是找到第一个匹配,并且如果有分组,…

【C#学习笔记】引用类型(1)

文章目录 引用类型class匿名类 记录引用相等和值相等record声明 接口delegate 委托合并委托/多路广播委托 引用类型 引用类型的变量存储对其数据&#xff08;对象&#xff09;的引用&#xff0c;而值类型的变量直接包含其数据。 对于引用类型&#xff0c;两种变量可引用同一对…

软件开发和测试开发选哪个更好?一文讲清!

1、岗位需求分析 随着科技的发展&#xff0c;软件测试领域对人才的要求越来越高&#xff0c;特别测试开发岗位已成行业热点关注对象。 做开发的同学也对测试开发岗位感到好奇&#xff0c;为什么做测试还要写代码做开发&#xff1f; 他们都在开发些什么软件&#xff1f; 到底…

【C++】开源:Eigen3矩阵与线性代数库配置使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍Eigen3矩阵与线性代数库配置使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&…

ElementUI el-table 鼠标滚动失灵的问题及解决办法

Bug&#xff1a;ElementUI el-table 鼠标滚轮下滑动失灵的情况 我测出来的这个问题条件很苛刻&#xff0c;需要达到以下几个条件才会触发&#xff1a; 1.element plus&#xff08;其他版本没试&#xff09; 2.el-table-column组件有fixed属性时 3.template标签中有el-butto…

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

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

pytorch入门

详细安装教程和环境配置可以看&#xff1a;Python深度学习&#xff1a;安装Anaconda、PyTorch&#xff08;GPU版&#xff09;库与PyCharm_哔哩哔哩_bilibili 跟学课程&#xff1a;B站我是土堆 pytorch中两个实用函数&#xff1a; dir()&#xff1a;打开 help():说明书…

Java POI 百万规模数据的导入和导出

目录 1、百万数据导入1.1 需求分析1.2 思路分析1.3 代码实现1.3.1 步骤分析1.3.2 自定义处理器1.3.3 自定义解析1.3.4 测试 2、百万数据导出2.1、概述2.2、解决方案分析2.3、原理分析2.4、百万数据的导出2.4.1、模拟数据2.4.2、思路分析2.4.3、代码实现2.4.4、测试结果 1、百万…

python-网络爬虫.Request

Request python中requests库使用方法详解&#xff1a; 一简介&#xff1a; Requests 是Python语言编写&#xff0c;基于urllib&#xff0c; 采用Apache2 Licensed开源协议的 HTTP 库。 与urllib相比&#xff0c;Requests更加方便&#xff0c;处理URL资源特别流畅。 可以节约我…