vue2开发常见问题(二)
1.vue组件有定时器,切换路由后计时器不停止?
mounted () {
let _this = this _this.queryList() window.timer = setInterval(function () { _this.queryList() }, 10000) }, destroyed () { if (window.timer) { clearInterval(window.timer) } }
1.使用v-html显示一段html代码,但是里面绑定的click事件不生效 ?
原代码:
<div v-html="test"></div>
export default { name: 'app', data() { return { test: '<div class=container><ul><li class=part @click="cleckEvent">1234</li><li class=part @click="cleckEvent">ssss</li><li class=part @click="cleckEvent">3fe3322</li></ul></div>', } }, methods: { cleckEvent: function () { console.log(11); } } }
打开浏览器发现@click也显示在li节点上,解决方法:可以使用js中的事件委托,把click事件绑定在v-html的那个节点上
<div v-html="test" @click="clickFrage($event)"></div>
methods:{ async clickFrage (event) { if (event.target.className === 'part') { console.log(111) // 此处可以写自己的click处理 } } }
注意:vue-cli打包后,在谷歌浏览器上点击控制台会出现以下问题:
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
See https://www.chromestatus.com/features/5093566007214080
解决办法:阻止浏览器默认事件
<div v-html="test" @click.prevent="clickFrage($event)"></div>
posted on 2017-09-13 15:43 zhoujian917 阅读(480) 评论(0) 编辑 收藏 举报