• ?Dialog 對(duì)話框：使用中數(shù)據(jù)獲取問題

?

演示代碼：?

<div class="centerContent"><ul><li class="contentBox" v-for="(notice,index) in systemNotices" :key="index"> //循環(huán)取值<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> //點(diǎn)擊此處 cilck事件觸發(fā)Dialog 對(duì)話框<p class="rightBottom"><span>{{notice.createTime}}</span></p></div><el-dialog　　　　　　　　　　　//計(jì)劃點(diǎn)擊出現(xiàn)對(duì)應(yīng)循環(huán)數(shù)據(jù)的Dialog對(duì)話框: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>

?

　　注意紅色字體的代碼：預(yù)期是想在for循環(huán)當(dāng)中放了一個(gè)?Dialog對(duì)話框代碼塊，從而點(diǎn)擊單條數(shù)據(jù)時(shí)， 觸發(fā)對(duì)話框展示當(dāng)前條數(shù)據(jù)。

結(jié)果：Dialog對(duì)話框代碼塊無法識(shí)別? notice 屬性

解決方法： 觸發(fā)點(diǎn)擊事件的時(shí)候獲取當(dāng)前數(shù)據(jù)存儲(chǔ)到 數(shù)據(jù)對(duì)象——data中，然后綁定數(shù)據(jù)對(duì)象——data中新創(chuàng)建的數(shù)據(jù)到所需要的動(dòng)態(tài)屬性中。

methods代碼：

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

　　HTML代碼:

注意顏色標(biāo)注的代碼變化：

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

?

　　

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/lishengye/p/10963239.html

總結(jié)

以上是生活随笔為你收集整理的elementUi Dialog 对话框使用中数据获取问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。