工作339:pc父组件通过props传值给子组件,如何避免子组件改变props的属性值报错问题

  </el-form><div><!--子代方法有一个·传值传向父级 onselect去接收这个值--><select-account :data1.sync="accountList" :checkedData.sync="checkedData1" @seletct="onSelect" /></div><div style="clear: both"></div><template v-slot:footer><el-button @click="cancel">取 消</el-button><el-button type="primary" @click="confirm">确 定</el-button></template></el-dialog></div>
 <el-checkbox-group   v-model="ooo"  @change="handleCheckedDataChange"><!--循环遍历得到每一个数据  传入data的每一个数据--><el-checkbox  v-for="acc in data" :label="acc" :key="acc.id" style="margin-left: 5px;margin-top: 20px"><!--  <el-checkbox v-for="acc in data" :label="acc" :key="acc.id">--><el-cardshadow="hover"class="card-container"style="display: flex;justify-content: center"><!--  <div class="avatar-img">&lt;!&ndash;  <span><img :src="acc.pAvatar" alt="image" class="media-img" /></span>&ndash;&gt;&lt;!&ndash; <el-avatar :src="acc.dAvatar" alt="image"  />&ndash;&gt;</div>--><div style="display: flex;justify-content: left;align-items: center"><div style="display: flex;flex-direction: column;font-size: 12px;justify-content: center"><div style="display: flex;justify-content: left"><div style="margin-top: 10px;margin-right: 20px;text-align: center"><img v-if="acc.plugin_icon_url!=''&&acc.plugin_icon_url!=null" style="width: 24px;height: 24px" :src="acc.plugin_icon_url" alt=""><i v-else style="width: 24px;height: 24px" class="el-icon-warning-outline"></i><h1 style="font-size: 12px;">{{ acc.name }}</h1><p style="font-size: 12px;margin-top: 2px;">{{ acc.departmentName }}</p></div><div style="display: flex;flex-direction: column;justify-content: left;text-align: center"><div style="font-size: 12px;background-color: #ccc;">{{ acc.platform }}</div><p style="font-size: 12px;">刊例价:¥{{ acc.price }}</p><p style="font-size: 12px">平均播放量:{{ acc.avg_view==null?0:acc.avg_view }} </p><p style="font-size: 12px">粉丝数:{{ acc.num_fan==null?0:acc.num_fan }}</p></div></div></div><!--   <div style="margin-left: 40px;"><input type="checkbox" name="running" :checked="checked" style="width: 20px;height: 20px"></div>--></div><!-- </div>--><!--<div class="gy-right"><div class="account-name"><span>{{ acc.platform }}</span></div>--><!--<div class="account-info"><p class="p-slide">刊例价:¥{{ acc.price }}</p><p class="p-slide">平均播放量:{{ acc.avg_view }} </p><p class="p-slide">粉丝数:{{ acc.num_fan }}</p></div>--></el-card></el-checkbox></el-checkbox-group></div></template><script>import {getAction} from "@/api";export default {name: "SelectAccount",// props: {// 	value: {// 		type: String | Number,// 		required: true// 	},// },model: {prop: "value",event: "change"},/* computed:{ooo:function (){return this.checkedData}},*/props: ['checkedData','data1'],data() {return {ooo: this.checkedData,selectStatus: [],data: this.data1,/*双向绑定数据 双向数据绑定*/checked:true};},mounted() {this.list();},/* watch(){console.log(this.checkedData,"11111")},*/methods: {/*向父组件传值*/// onSelect(data) {// 	this.$emit("seletct", data);// },/*test(){this.checked=!this.checked},*/list() {getAction('/account/list').then(res => {/*定义一个list数组*/var list = [];/*定义一个字符串对象*/var data = '';for (var i = 0; i < res.data.length; i++) {/*创建数组{"id": "1","name": "Hi苏州","num_fan": null,"avg_view": null,"platform": "今日头条","department_id": "1","column": null,"price": "111.00","department_name": "ddd1"},*/data = {/*任务id*/id: res.data[i].id,/*账号名称*/name: res.data[i].name,/*粉丝数*/num_fan: res.data[i].num_fan,/*平均播放量*/avg_view: res.data[i].avg_view,/*账号类型*/platform: res.data[i].platform,/*部门id*/department_id: res.data[i].department_id,column:res.data[i].column,/*刊价比*/price: res.data[i].price,/*部门名称*/departmentName: res.data[i].department_name,/*暂时写死的两个字段 后续可注释*/pAvatar: "./logo.png",dAvatar: "./logo.png",plugin_icon_url:res.data[i].plugin_icon_url,}list.push(data);}/*赋值给data*/this.data = list;})},/*父子组件传值 通过select的属性进行传值*/handleCheckedDataChange(val){console.log(this,"3333")/*触发父亲组件的方法 冰进行传值*/this.checked=!this.checkedconsole.log(this.checked,"1111")this.$emit("seletct", val);}}

避免直接改变 中转

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

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

相关文章

H5新增的标签和属性

声明 Web 世界中存在许多不同的文档。只有了解文档的类型&#xff0c;浏览器才能正确地显示文档。 HTML 也有多个不同的版本&#xff0c;只有完全明白页面中使用的确切 HTML 版本&#xff0c;浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。 <!…

Qt错误汇总

1-工程文件不能包含中文路径。 2-转载于:https://www.cnblogs.com/chdfelix/p/9548686.html

css之文本溢出处理 | 背景图片处理

文本溢出处理 单行文本用缩略符号——text-overflow:ellipsis; 多行文本做截断策略——line-height * 行数 height;text-overflow:hidden; 背景图片处理相关属性 1、background&#xff1a;设置对象的背景样式&#xff0c;是一个复合属性&#xff0c;可以用于同时设置背景…

hdu 2196 computer

hdu 2196 题意 给出一棵树&#xff0c;求出树上每一个点在树上走一条简单路径所能走的最长距离。 解法 说起来&#xff0c;这是我今天1A的第一题 我们设\(up[i]\) 表示从这个点向上走到某个点又向下走的最长距离 设 \(down[i][0]\) 表示从这个点出发向他的子树所能走到的最大距…

CSS之盒模型

怎么理解盒子模型&#xff1f; 盒子模型是样式表&#xff08;css&#xff09;控制页面的很重要的概念。如果理解了盒子模型和其中每个元素的用法&#xff0c;才能熟练使用css的定位方法和技巧。所有的页面的元素都可以看成是一个盒子&#xff0c;占据一定的页面空间。占据的空…

[css] 使用css画个钟表的时间刻度

[css] 使用css画个钟表的时间刻度 写一下思路&#xff0c;先定义一个钟表的大小位置&#xff0c;用absolute,从1点到12点用ul,li。每个li可以用nth-child(对应第几个)来控制位置&#xff0c;角度用transform&#xff0c;然后分钟的刻度也是照样子分别控制位置&#xff0c;要用…

BZOJ 2301 - Problem b(莫比乌斯反演+容斥)

题目链接 https://cn.vjudge.net/problem/HYSBZ-2301 【题意】 对于给出的 n 个询问&#xff0c;每次求有多少个数对(x,y)(x,y) &#xff0c;满足 a≤x≤b&#xff0c;c≤y≤da≤x≤b&#xff0c;c≤y≤d &#xff0c;且 gcd(x,y)k&#xff0c;gcd(x,y)gcd(x,y)k&#xff0c;g…

前端两个经典bug

1、margin塌陷bug <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible&qu…

[css] 请使用css3实现图片的平滑转换

[css] 请使用css3实现图片的平滑转换 以全局监听的方式通过 a 标签的描点进行 view 动态切换页面&#xff0c;只要把 a 标签带有 id 的 href 属性的值指到锚点&#xff0c;用 CSS3 的动画进行切换页面.个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易…

== vs === in Javascript

本文来自网易云社区作者&#xff1a;魏文庆如果你只想知道与的区别&#xff0c;请直接看总结&#xff0c;当然我更希望您能耐心看完全文。Javascript中用于相等比较的操作符有两个和。我们通常称为“等于”&#xff0c;而我们通常称为“严格等于”。本文将对和做详细说明。相对…

[css] 使用纯css能否监控到用户的一些信息?怎么实现?

[css] 使用纯css能否监控到用户的一些信息&#xff1f;怎么实现&#xff1f; 利用:active 伪类实现监控用户的点击 .button-1:active::after {content: url(./pixel.gif?actionclick&idbutton1);display: none; } .button-2:active::after {content: url(./pixel.gif?ac…

hive 动态分区实现 (hive-1.1.0)

hive 动态分区实现 &#xff08;hive-1.1.0&#xff09; 笔者使用的hive版本是hive-1.1.0 hive-1.1.0动态分区的默认实现是只有map没有reduce,通过执行计划就可以看出来。&#xff08;执行计划如下&#xff09; insert overwrite table public_t_par partition(delivery_dateke…

浏览器的组成

外壳shell&#xff1a;User Interface&#xff08;用户界面&#xff09;、Browser engine&#xff08;浏览器引擎&#xff09;、Networking&#xff08;网络&#xff09;、UI Backend&#xff08;UI 后端&#xff09;、Date Persistence&#xff08;数据持久化存储&#xff09;…

[css] css的加载会阻塞js运行吗?为什么?

[css] css的加载会阻塞js运行吗&#xff1f;为什么&#xff1f; 会阻塞js的执行&#xff0c;因为js可能会去获取或改变元素的样式&#xff0c;所以浏览为了不重复渲染&#xff0c; 等所有的css加载渲染完成后在执行js个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知…

JS基础知识点总结

NaN 与任何值相比较 都是false (包括它自己 如NaN NaN >false)&#xff0c;可以理解为它连自己的不认识parseInt("123abc") 计算机是从头到尾读字符串&#xff0c;如果不是数字就截断&#xff0c;直接返回parseFloat同理num 123.1456789 num.toFixed(3…

[css] css的加载会阻塞DOM树解析和渲染吗?为什么

[css] css的加载会阻塞DOM树解析和渲染吗&#xff1f;为什么 css的加载不会阻止DOM树的解析 css的加载会阻止DOM树的渲染&#xff0c;因为css的下载完成后解析成CSSOM与DOM生成渲染树后&#xff0c;页面才会渲染&#xff0c;绘制出来个人简介 我是歌谣&#xff0c;欢迎和大家…

0901

下拉刷新一万赞&#xff1a;https://github.com/scwang90/SmartRefreshLayout git上搜索&#xff1a;refreshLayouthttps://github.com/search?odesc&qrefreshLayout&sstars&typeRepositories SwipeRefreshLayout pullRefresh XRecyclerView转载于:https://www.cn…

jQuery Validate 前端校验

参考自&#xff1a;https://www.runoob.com/jquery/jquery-plugin-validate.html 建议&#xff1a;将引入的js&#xff0c;jQuery&#xff0c;css文件下载到自己的本地或者远程服务器 否则&#xff1a;如果您的网站使用了SSL证书请求的安全策略&#xff0c;注意引用的文件是否…

[css] 异步加载CSS的方式有哪些?

[css] 异步加载CSS的方式有哪些&#xff1f; 异步加载CSS 说到加载 CSS 这种事儿不是很简单吗&#xff1f;像这样咯&#xff1a; 这不就完事儿了嘛&#xff01; 这样是没错&#xff01;但是这样有问题啊——会阻塞渲染&#xff01;浏览器看到这个标签就会停下手里的活儿&…

Golang 垃圾回收机制

1. Golang GC 发展 Golang 从第一个版本以来&#xff0c;GC 一直是大家诟病最多的。但是每一个版本的发布基本都伴随着 GC 的改进。下面列出一些比较重要的改动。 v1.1 STWv1.3 Mark STW, Sweep 并行v1.5 三色标记法v1.8 hybrid write barrier2. GC 算法简介  这一小节介绍三…