elementUi Dialog box use data access issues

•  Dialog box: the use of data access issues

 

Demo code: 

<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>: title = "notice.title"program click on the corresponding cyclic data appearing Dialog box//
            <EL-Dialog　　　　　　　　　　　
            </ div>
                
                :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>

 

　　Notice the red font code: Expected want to put a dialog Dialog in the for loop code block them, so that when a single click data, the dialog box showing the current trigger of data.

Results: Dialog box code block unrecognized  notice Properties

Solution: Get click event triggered when the current data stored in the data object --data , then bind data objects --data newly created dynamic attributes in need .

methods of code:

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

　　HTML code:

Note that the code changes color-coded:

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