Vue inline click event `this` is undefined

Question

i'm getting an error in the below code saying this is undefined.

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

However if I change this line:

@click="() => { this.selected = key; this.manageSurrounding = false }"

to this

@click="selected = key"

It works fine, however I need to change manageSurrounding at the same time and I don't want to create a method for such a simple thing.

this is not in template scope, just use: @click="() => { selected = key; manageSurrounding = false }" — Zed Home
– Zed Home, Commented Jun 12, 2020 at 10:27

tony19 · Accepted Answer · 2020-06-13 04:24:18Z

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>

edited Jun 13, 2020 at 4:24

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jun 12, 2020 at 10:19

Abhishek Kulkarni

1,7671 gold badge8 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Martyn Ball Over a year ago

> Statements are not allowed in Vue expressions

tony19 Over a year ago

@MartynBall That's not true. Why do you think that? See demo of the answer above.

Martyn Ball Over a year ago

@tony19 that's the error I get when I attempt to do what you say

tony19 Over a year ago

@MartynBall Where are you seeing the error? If it's Webstorm, that's not actually a real error.

Neha Jain · Accepted Answer · 2020-06-12 18:50:51Z

1

You can use a anonymous function like,

<div onclick="return function()

 { selected = key; manageSurrounding = false }'

</div>

answered Jun 12, 2020 at 18:50

Neha Jain

1268 bronze badges

Comments

János Veres · Accepted Answer · 2020-06-12 21:33:41Z

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

answered Jun 12, 2020 at 21:33

János Veres

1991 silver badge7 bronze badges

Collectives™ on Stack Overflow

Vue inline click event `this` is undefined

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related