elementUi Dialog 对话框使用中数据获取问题

Dialog 对话框：使用中数据获取问题

演示代码：

<div class="centerContent"><ul><li class="contentBox" v-for="(notice,index) in systemNotices" :key="index">   //循环取值<div class="centerleft" ><img :src="notice.isRead == '0'?'static/img/icon/no.png':'static/img/icon/yes.png'" alt=""></div><div class="centerright"><p class="rightTop" @click="isRead(notice.title,notice.content,notice.id,$event)">{{notice.title}}</p> //点击此处 cilck事件触发Dialog 对话框<p class="rightBottom"><span>{{notice.createTime}}</span></p></div><el-dialog　　　　　　　　　　　//计划点击出现对应循环数据的Dialog对话框:title="notice.title":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>{{notice.content}}</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></li></ul>
</div>

　　注意红色字体的代码：预期是想在for循环当中放了一个 Dialog对话框代码块，从而点击单条数据时，触发对话框展示当前条数据。

结果：Dialog对话框代码块无法识别 notice 属性

解决方法：触发点击事件的时候获取当前数据存储到数据对象——data中，然后绑定数据对象——data中新创建的数据到所需要的动态属性中。

methods代码：

data(){return {forTitle:"",forContent:""}
},
methods:{isRead(title,content){this.forTitle = title;this.forContent = content;}
}

　　HTML代码:

注意颜色标注的代码变化：

<div class="centerContent"><ul><li class="contentBox" v-for="(notice,index) in systemNotices" :key="index"><div class="centerleft" ><img :src="notice.isRead == '0'?'static/img/icon/no.png':'static/img/icon/yes.png'" alt=""></div><div class="centerright"><p class="rightTop" @click="isRead(notice.title,notice.content)">{{notice.title}}</p><p class="rightBottom"><span>{{notice.createTime}}</span></p></div><el-dialog :title="forTitle":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>{{forContent}}</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></li></ul>
</div>

转载于:https://www.cnblogs.com/lishengye/p/10963239.html

elementUi Dialog 对话框使用中数据获取问题相关推荐

去除 element-ui 中 Dialog 对话框遮罩层的方法
在使用element-ui的Dialog时,默认会有遮罩层,想要去除遮罩层,官方文档给出了 modal 属性: modal 是一个布尔值,表示是否需要遮罩层: 然而,将 modal 赋值为 false ...
android 之Dialog的多种Dialog对话框(以及反射在自定义对话框的运用)
实际效果: 实例代码: 一个"启动初始Activity.xml" 一个弹出的Activity 业务逻辑代码: package com.hsj.example.alertdialog ...
Angular实现dialog对话框封装
Angular实现dialog对话框封装为什么要封装? 对于Angular Material UI库中的dialog组件,实在不是很好用,所以打算简单封装一下啊. 直接代码吧. 封装dialog组件 ...
dialog对话框初始化 mfc_MFC添加子对话框及如何初始化
一.建立子对话框 1.建立一个基于对话框的MFC工程 2.在资源视图中右键单击.rc文件,然后选择添加添加资源->Dialog 3.第二步新建的Dialog对话框中默认的会有确认和取消两个按钮( ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
vue 只要一杯卡布奇诺时间，就能简单上手的Dialog对话框
来,效果图文件结构首先,你在vue的项目里面,找个合适的位置创建一个文件夹,创建一个vue的文件以及一个js文件代码如下: myDialog.vue <template><d ...
element-ui dialog组件添加可拖拽位置可拖拽宽高
有几个点需要注意一下每个弹窗都要有唯一dom可操作指令可以做到拖拽时要添加可拖拽区块 header 由于element-ui dialog组件在设计时宽度用了百分比, 这里不同浏览器有兼容性问题 ...
Acitivity（页面）之间的跳转，ProgressBar 进度条，PopupWindow 弹出框，Dialog 对话框，Spinner下拉框
Acitivity(页面)之间的跳转 Acitivity(页面)之间的跳转需要使用到 Intent(意图) Intent intent = new Intent(MainActivity.this(从 ...
弹出Dialog对话框5.18
点击相应按钮,弹出Dialog对话框.首先为该按钮绑定一个单击事件,然后在methods中对该函数事件进行处理. 先对要弹出的对话框进行简单的处理. 该对话框默认是隐藏状态,所以在data中默认set ...

elementUi Dialog 对话框使用中数据获取问题

elementUi Dialog 对话框使用中数据获取问题相关推荐

最新文章

热门文章