javascript+vue3 warning in html: Unresolved variable or type
The problem is in webstorm 2023.1.2
I bring in the cdn of vue3 in my code.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css"/>
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goals">
<h2>My course goals</h2>
<input type="text" v-model="enteredGoalValue"/>
<button @click="addGoal">Add Goal</button>
<p v-if="goals.length === 0">No goals have been added yet - please start adding some!</p>
<ul v-else>
<li>Goal</li>
</ul>
</section>
</body>
</html>
app.js:
const app = Vue.createApp({
data() {
return {
enteredGoalValue: '',
goals: []
};
},
methods: {
addGoal() {
this.goals.push(this.enteredGoalValue);
}
}
});
app.mount('#user-goals');
Actrually, I see someone said in this forum that this bug will be fixed in webstorm 2023.1.1.
But it still here.
How can i do that?
Please sign in to leave a comment.
https://youtrack.jetbrains.com/issue/WEB-52495/Vue-3-component-props-methods-defined-in-separate-files-not-recognized is indeed fixed in 2023.1.1, and it works fine for me in 2023.1.2 using your example:
Did you download the Vue library using the intention available on Alt+Enter on the CDN links?