Vue 内联点击事件`this` 未定义

Question

我在下面的代码中收到一个错误，说this未定义。

<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>

但是，如果我更改此行：

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

对此

@click="selected = key"

它工作正常，但是我需要同时更改manageSurrounding并且我不想为这么简单的事情创建一个方法。

Answer 1

您可以使用分号进行多项赋值，就像您编写的上述语句一样。

<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>