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