搜尋

首頁  >  問答  >  主體

javascript - 使用vue.js要達到效果：點選li，取得目前點擊li的html值，參數this變成變成了window物件?

要達到的效果：

主要程式碼

<body>
<p id="page">
    <ul>
        <li v-on:click="aa(this)" v-for="item in items">{{item}}</li>
    </ul>
</p>
<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呢？

#
曾经蜡笔没有小新曾经蜡笔没有小新2777 天前1001

全部回覆(4)我來回復

  • 高洛峰

    高洛峰2017-06-14 10:56:14

    看文件的時候看的仔細一點…不要臆想這些莫名其妙的用法。

    內聯事件需要存取原始事件物件的時候，給裡面加上$event參數就行了。像這樣：

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

    你要拿到目前li標籤的對象，讀取事件對像下的currentTarget屬性就行了，即event.currentTarget。

    回覆
    0
  • 女神的闺蜜爱上我

    女神的闺蜜爱上我2017-06-14 10:56:14

    雷雷 雷雷

    回覆
    0
  • ringa_lee

    ringa_lee2017-06-14 10:56:14

    給li加個ref屬性 然後在methods中透過this.$refs拿到dom節點

    回覆
    0
  • typecho

    typecho2017-06-14 10:56:14

    檢定可行：

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

    回覆
    0
  • 取消回覆