[Vuejs]-Vue inline click event `this` is undefined

by

5👍

You can do multiple assignments by using semicolon like the above statement which you have written.

<div class="location-list__item" v-for="(value, key) in locations.data">
    <div class="location-list__item--text"
         :class="{ selected: selected === key }"
         @click="selected = key;manageSurrounding = false">        # Like this
        <i class="fas fa-compass"></i> {{ value.name }}
        <span v-if="value.changed" class="has-text-danger"> Changed</span>
    </div>
</div>
👤Abhishek Kulkarni

1👍

You can use a anonymous function like,

<div onclick="return function()

 { selected = key; manageSurrounding = false }'

</div>
👤Neha Jain

0👍

Just create a method and put in the update lines, you are better off on the long run, if your list is changing/reordering/re-rendering often.

It’s an optimization opportunity, so don’t try to force it in just because it seems small. Have a look at this answer: anonymus function in template

👤János Veres

Leave a comment