Click event problem of vue

html:

<ul id="optionList">
        <li class="listItem vux-1px-b" id="myWallet" @:click="itemClk">
            <p class="icon"><img src="@/assets/images/icon/icon9.png">

<p class="text">

<p class="arrow"><img src="@/assets/images/icon/r_arrow.png">

</li> <li class="listItem vux-1px-b" id="order" @click="itemClk"> <p class="icon"><img src="@/assets/images/icon/icon1.png">

<p class="text">

<p class="arrow"><img src="@/assets/images/icon/r_arrow.png">

</li> <li class="listItem vux-1px-b" id="cooperation" @click="itemClk"> <p class="icon"><img src="@/assets/images/icon/icon8.png">

<p class="text">

<p class="arrow"><img src="@/assets/images/icon/r_arrow.png">

</li> </ul>

js:

methods: {
    itemClk (e) {
        let thisId = e.target.id
        this.$router.push(thisId)
    }
},

effect picture:

clipboard.png

:
liliid

:
liliid
clipboard.png

clipboard.png

icon

clipboard.png

li

clipboard.png

in this way, you can"t directly get id of li , so I"d like to ask everyone how when binding a click event to li , click li to always get the li element, instead of getting its child element
(try @ click.stop is useless.)

Jan.08,2022

event.currentTarget gets the DOM object bound by the click event , and event.target gets the DOM object


writes a methods method, and then v-for out the tag to get the list content, and when for binds the event to pass the specified parameters to the methods method, then the parameters are the same everywhere. Then route jump according to the passed parameters


just pass id as a parameter into the itemClk function


it is suggested that the list, of a menu be specified in data and then v-for cycle out:


@click='itemClk(item.id)'<br>//<br>itemClk (id) {

    let thisId = id
    this.$router.push(thisId)
}
Menu