[Vue]字符串拼接中 button的点击事件不触发

dxxbjl 发表于 2021-12-17 16:25

if (this.code < _this.static_passingcode) {
//分数小于合格分数,需要重新答题
_this.str3 += "" +
   "<font size='3' >您的分数是：</font>" +
   "<font size='7' class='code'>" + this.code + "分</font> <br><br>" +
   "<font size='5'style='color: red' >未通过测试，需要重新答题</font>";
_this.str3 += "<br><br>"
_this.str3 += " <button class='button7' @click='reanswer()'>重新答题</button>"

}
//method
reanswer2(){ //重新答题
this.dis = false
console.log("**重新答题**")
this.load();
this.loadpagenumber(i);
}

字符串拼接中的 button 其中他的点击事件无法触发，也不报错。大佬们，这个应该怎么改？

dxxbjl 发表于 2021-12-17 16:45

如果用原生的onclick=“”的话，方法要写在script中，可是挂载在window下的reanswer2() 方法就没法调用 method下的load方法。

dxxbjl 发表于 2021-12-17 16:47

本帖最后由 dxxbjl 于 2021-12-17 16:49 编辑

改：
_this.str3 +="<button class='button7'onclick='reanswer()'>重新答题</button>"

挂载在window下的方法

window.reanswer=function (){ //重新答题
// this.dis = false
console.log("**重新答题**")
this.load()
}

method下的load方法没有被调用

dxxbjl 发表于 2021-12-17 17:11

我在created（）方法中使reanswer变成了全局方法
window.reanswer = this.reanswer;
这样我在 script中调用
window.qqq=function (){ //重新答题
reanswer()
}

按钮绑定qqq

这样能执行reanser方法。但是又引发了新的问题，这样 reanswer重加载的load方法展示是乱的

dxxbjl 发表于 2021-12-17 17:13

原load

重加在后

萋小磊 发表于 2021-12-17 18:38

你都用Vue了为啥还要拼接 Dom

unmask 发表于 2021-12-17 20:09

首先你要理解每个方法中的this真实含义，vue中的method中的this其实就是vue组件本身，你的windows.reanswer中的this其实是window，当然没有load方法。
同楼上疑问，已经使用了vue，为啥不是template语法，反而使用vue之前的jquery拼接方式？

页: [1]

吾爱破解 - 52pojie.cn's Archiver

[Vue]字符串拼接中 button的点击事件不触发