The application I am testing includes the EntryEditor component within the App.vue file.
<script lang="ts" setup>
import EntryEditor from "./components/EntryEditor.vue";
import { reactive } from "vue";
import type Entry from "@/types/Entry";
const doSomething = (entry: Entry) => {
console.log(entry);
};
</script>
<template>
<main class="container m-auto p-10">
<TheHeader />
<EntryEditor @@create="doSomething" />
</main>
</template>
The functionality of the EntryEditor is as follows:
<script lang="ts" setup>
import { ref, computed } from "vue";
import type Entry from "@/types/Entry";
const text = ref("");
const emoji = ref<Emoji | null>(null);
const maxChars = 280;
defineEmits<{
(e: "@create", entry: Entry): void;
}>();
</script>
<template>
<form
class="entry-form"
@submit.prevent="
$emit('@create', {
body: text,
emoji,
createdAt: new Date(),
userId: 1,
id: Math.random(),
})
"
>
<EmojiField v-model="emoji" />
<div class="entry-form-footer">
<span>{{ charCount }} / {{ maxChars }}</span>
<button>
Remember
<ArrowCircleRight width="20" />
</button>
</div>
</form>
</template>
When attempting to use the @@create feature, an error message is displayed:
https://i.sstatic.net/ueKCp.png
How can I activate the tool that assists in resolving this issue?