需求:后台给的一部分数据需要绑定事件,然后根据需要绑定查看详情事件。
数据结构:

{
	"addr":"1095b308dbcb8ad4791d56028b7f5731c7e655c7",
	"balance":"{\"thisistest7\":94999900}",
	"nonce":4,
	"isToken":true
}

由于balance是个字符串,需要点击后查看详情,必须渲染成html,但是渲染后的html里面写绑定事件的代码没有经过vue编译,所以事件无效。

解决办法:在v-html同级元素中使用事件绑定,然后根据事件处罚的目标对象去获取参数。

<td v-html="item.balance" @click="tokenDetail($event)">{{item.balance}}</td>

渲染内容:

<a href="javascript:;" data-key="key">key : value</a><br>

事件详情:

tokenDetail: function(e){
  if(e.target.nodeName === 'A'){
  	// 获取触发事件对象的属性
        var token = e.target.getAttribute('data-key');
        layer.open({
            type: 2,
            title: '详情',
            area: ['800px','500px'],
            shade: [0],
            content: ['token_detail.html?token='+ token],
            shadeClose: true
        })
    }
},
Logo

前往低代码交流专区

更多推荐