vue 如果是JS插入的html事件,能实现吗?

kaipizhe
  • 1.2k

下面这个 @click="_del(1)" 怎么可以让他生效

<template>
<div>
 <div id="list"></div>
</div>
</template>
<script>
export default {
    name: "Test",
 methods: {
        _html() {
            let html = '<ul>';
 html += '<li><a href="#" @click="_del(1)">删除</a></li>';
 html += '<li><a href="#" @click="_del(2)">删除</a></li>';
 html += '<li><a href="#" @click="_del(3)">删除</a></li>';
 html += '</ul>';
 $('#list').html(html);
 },
 _del(id) {
            console.log(id)
        }
    },
 mounted() {
        this._html()
    }
}
</script>
<style scoped>
</style>
回复
阅读 191
3 个回答

你这么写就有点违背vue数据驱动视图了,你可以更改为如下写法:
查看DEMO

  <ul>
    <template v-for='(item,index) in liList'>
      <li @click='delLi(item.id)' v-if='!item.isDel'>删除{{item.id}}</li>
    </template>
  </ul>
data() {
    return {
      liList: [
        {
          id: 0,
          isDel: false
        },
        {
          id: 1,
          isDel: false
        },
        {
          id: 2,
          isDel: false
        }
      ]
    };
  },
  methods: {
    delLi(index) {
      this.$set(this.liList[index], "isDel", true);
    }
  }
<template>
<div>
 <div id="list"></div>
</div>
</template>
<script>
function _del(id) {
    console.log(id)
}
export default {
    name: "Test",
 methods: {
        _html() {
            let html = '<ul>';
 html += '<li><a href="#" onclick="_del(1)">删除</a></li>';
 html += '<li><a href="#" onclick="_del(2)">删除</a></li>';
 html += '<li><a href="#" onclick="_del(3)">删除</a></li>';
 html += '</ul>';
 $('#list').html(html);
 },
 
 mounted() {
        this._html()
    }
}


    
</script>
<style scoped>
</style>

vue里事件和dom对象的联系是在模板解析式就建立的你这样在运行时在添加摸板是没用的,你的页面因该是靠数据驱动的,你既然想写jquery那干嘛还用vue

你知道吗?

宣传栏