问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

使用vue.js要达到效果：点击li，获取当前点击li的html值，参数this变成变成了window对象?

头像
tuihou123321
    49118112152

    要达到的效果：

    • 点击li，获取当前点击li的html值；

    主要代码

    <body>
<div id="page">
    <ul>
        <li v-on:click="aa(this)" v-for="item in items">{{item}}</li>
    </ul>
</div>
<script type="text/javascript">
new Vue({
  el: '#page',
  data: {
        items:[11,22,33,44]
  },
  methods:{
    aa:function(obj){
        console.log(obj);  //打印出来的是 window对象？
        alert(obj.html());   //找不到点击的值；
    }
  }
})
</script>
</body>

    问题描述：

    点击li后传递的this打印出来是window对象，而不是li这个对象，所以找不到对象；怎么传递当前的li这个对象到js中呢？

    clipboard.png

    javascriptvue.js
    阅读 10.8k
    4 个回答
    得票最新
    头像
    xiaoboost
      7.7k31421
      ✓ 已被采纳

      看文档的时候看的仔细一点……不要臆想这些莫名其妙的用法。

      内联事件需要访问原始事件对象的时候，给里面加上$event参数就行了。像这样：

      <li v-on:click="aa($event)" v-for="item in items">{{item}}</li>

      你要拿到当前li标签的对象，读取事件对象下的currentTarget属性就行了，即event.currentTarget。

      头像
      xiter
        13619
        <li @click="aa(item)" v-for="item in items">{{item}}</li>
        aa(item) {
  console.log(item) // 当前li的内容
}
        头像
        tuihou123321
          49118112152

          测试可行：

          <li @click="aa($event)" v-for="item in items">{{item}}</li>
            methods:{
    aa:function(event){
        console.log(event.target.innerHTML);
    }
  }
          头像
          Captain
            2.9k42233

            给li加个ref属性 然后在methods中通过this.$refs拿到dom节点

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题