I have a component (NoteComponent) that emits note-not-saved. This message is handled via

<template>
(...)
    <NoteComponent @note-not-saved='() => noteNotSaved=true' />
(...)
</template>

noteNotSaved itself is defined in my <script> section:

<script setup lang='ts'>
(...)
  const noteNotSaved = ref(false)
(...)
</script>

The application works fine, I have however a weak warning from my IDE (JetBrains GoLand or WebStorm)

Variable noteNotSaved implicitly declared

What does that exactly mean? How can noteNotSaved be more explicitly declared than that?

CodePudding user response：

The IDE may consider noteNotSaved=true as an implicit declaration of a global variable.

Try changing its value as follows:

const { createApp, ref } = Vue;

const NoteComponent = {
  template: `<button @click="$emit('note-not-saved')">Click</button>`
};

const App = {
  components: { NoteComponent },
  setup() {
    const noteNotSaved = ref(false);
    const setNoteAsNotSaved = () => {
      noteNotSaved.value = true;
    }
    return { noteNotSaved, setNoteAsNotSaved };
  }
};

createApp(App).mount("#myApp");

<script src="//unpkg.com/vue@next"></script>

<div id="myApp">
  <div><note-component @note-not-saved="setNoteAsNotSaved" /></div>
  <div><p>Note Not Saved: {{noteNotSaved}}</p></div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>