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>