动态生成的html如何再绑定一个VUE事件?

  • Z时代
  • 2024-03-12
  • 分类：IT

1.在改一个旧的前端，它是vue+jquery写的
2.在初始化时候有这种写在vue里的代码

str += '<li class="item">
    <a href="#goto'+i+'" class="link" >title+'"+i+"'</a>
</li>'

3.我想给a标签绑定个vue事件，为了点击获取拼接成的title+i，这咋整？

================补充
vue里的某个方法调用vm.initContent();
vue的方法initContent方法里有这段

str += '<li class="item">
    <a href="#goto'+i+'" class="link" >title+'"+i+"'</a>
</li>'
....
$('#fix').html(str);

这种混用搞不定

回答：

如果全局可以获得vue new之后的对象vm,在生成的html标签里面直接调用绑定

onclick="vm.initContent(i)"

回答：

不想改旧代码就事件代理下：

<div id="fix" @click="onClick"></div>
{
    methods: {
        onClick(e) {
            // e.target.textContent - 即点击的元素的内容
            // 可能需要做一些判断，比如是否是a、li，自行补充
        }
    }
}

回答：

如果能拿到new Vue之后的实例的话,用JQ监听a标签点击就行

回答：

可以试试用createVNode，如下

import { defineComponent, createVNode } from 'vue';
const temp = defineComponent({
  render() {
    return createVNode('div', {onClick: fn},[content])
  }
})

template 中使用

<div>
    <temp/>
</div>

和之前这个问题比较类似：https://segmentfault.com/q/10...

回答：

插入之后加个事件委托，或者提前绑定

$('.item').on('click', 'a', function(ev) {

   $(this).text();
})

以上是 动态生成的html如何再绑定一个VUE事件? 的全部内容， 来源链接： utcz.com/p/932889.html

回到顶部