Why does vue complain about myMap.delete(mapKey)?

Question

Vue.js

Hello, I want clicking on an element to delete the element from the map
, for this I want to use .delete(mapKey)

<template>
  <div>
    <div v-for="mapKey of messages.keys()" :key="mapKey">
      <div @click="messages.delete(mapKey)"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      messages: new Map(),
    };
  },
};
</script>

But I am getting an error

Errors compiling template:

  avoid using JavaScript unary operator as property name: "delete(mapKey)" in expression @click="messages.delete(mapKey)"

  2  |  <div class="messenger">
  3  |    <div v-for="mapKey of messages.keys()" :key="mapKey">
  4  |      <div @click="messages.delete(mapKey)"></div>
     |           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  5  |    </div>
  6  |  </div>

It swears at the word delete (), if I make a mistake in writing delete - everything works ...

Answer 1

@click="()=>messages.delete(mapKey)"