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