问

javascript - vue点击事件触发源如何正确获取？

aixiangsui2011 发布于 2022-11-27 19:08

按照官方给出的案例，点击事件触发源是在事件函数里边通过$event传递，实际操作中如下边，打印出来的对象很有可能是li span i 或者是p，我只想在获取到当前点击的li，如何获取？别说用jquery通过$index绑定到父级获取到当前那个li，实际数据中有可能层级很深你根本不知道有多少层，用vue的写法如何获取到当前点击那个li？

你可能点到我 也有可能点到我
更有可能会点到我

js代码:

new Vue({
                el:'#app',
                methods:{
                    clickFn:function(event){
                        console.info(event.target)
                    }
                }
})

4 个回答

寫了個簡單的例子：

jsFiddle

因為每個可點擊的 li 都利用 .stop 阻止往上冒泡，所以變成只會觸發當下的 li 點擊事件

2022-11-27 19:10 回答

灬我的独一小姐灬

使用楼上的方式

<p id="app">
    <ul>
        <li v-for="(item, index) in items" @click="clickFn($event, index)">
            <span :style="{color: item.color}">{{ item.text }}</span>
            <strong>world</strong>
            <em>123</em>
        </li>
    </ul>
</p>

<script>
new Vue({
    el: "#app",
    data: {
        items: [
            {text: 'red', color: 'red'},
            {text: 'green', color: 'green'},
            {text: 'blue', color: 'blue'},
        ]
    },
    methods: {
        clickFn: function(event, index) {
            alert($('#app ul li').eq(index).text());
        }
    }
});
</script>

2022-11-27 19:10 回答

JAYBRYANT-24

v-for="(item,index) in imtes" @click="clickFn(index)"

v-for第二个参数是索引。

2022-11-27 19:10 回答

淀死鈊
语法写成这样：@click.self=“callback()”,试试吧。

2022-11-27 19:10 回答

mobiledu2502891283

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签