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