Vue获取自定义属性值

如下代码:

<h3 style="padding:0px;text-align: left;padding-left: 10px;}">设备图片:</h3>
<div style="width:100%;text-align:left;padding:10px;border-width:1px;border-color:#ccc;border-style:solid;box-sizing:border-box;">
    <div style="padding:5px;border-color:#ccc;border-style:solid;border-width:1px;;display:inline-block;margin-right:10px;text-align:center;" v-for="(item,i) in tableData.imgs" :key="item.id">
        <i class="el-icon-error delete-icon" style="position:fixed;margin-top: -12px;margin-left: 142px;color: red;font-size: 20px;" :imgid="i" @click="delImg($event)"></i>
        <el-image  style="width:140px; height:140px" :src="PROCOMMON.host + item.img_ori" :preview-src-list="item.img_ori_arr" border></el-image>
    </div>
</div>

我们要通过点击<i> 元素获取它的的 imgid值

方法如下:

delImg(event){
    var ind = event.target.getAttribute("imgid");    // 获取自定义属性imgid值
    var imgInfo = this.tableData["imgs"][ind];
    var imgId = imgInfo["id"];
    console.log(imgId);
}

 

posted @ 2021-04-09 17:28  远洪  阅读(1051)  评论(0编辑  收藏  举报