I have a dropdown feature named "MissionPlanner" within a .vue file for a single page component. I've properly registered it in my App.vue file.
App.vue
import MissionPlanner from "./MissionPlanner.vue";
export default {
name: "app",
components: {
...,
"mission-planner": MissionPlanner
}
...
<template>
<mission-planner/>
</template
Despite registering the component, it does not show up when running the Vue application. The rest of the template renders fine, but the "mission-planner" dropdown is missing. I attempted changing the tags to "MissionPlanner" as well, with no success.
Here's my main.js
new Vue({
render: h => h(App),
components: {
"mission-planner": require("./MissionPlanner.vue")
} //Tried global registration, without any luck
}).$mount('#app')
Update: Upon reviewing the console, I noticed several errors that are unclear to me:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "chosen" is not defined on the instance but referenced during render. Ensure this property is reactive, either in the data option or by initializing it for class-based components. More info: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <MissionPlanner> at src/MissionPlanner.vue
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?2b0e:619
warnNonPresent @ vue.runtime.esm.js?2b0e:2015
get @ vue.runtime.esm.js?2b0e:2070
eval @ MissionPlanner.vue?93e1:18
...
The initial error message mentions 'reactive properties'. I'm uncertain about the implications of these issues. Provided below are snippets from my MissionPlanner.vue regarding its template and script.
<template>
<div>
<h1 id="jl">Justice League Mission Planner</h1>
<ul class="roster">
<h3>Roster:</h3>
<li v-for="hero in heroes"
:key="hero.name">
<span v-if="hero in chosen-heroes.chosenHeroes">✔ </span>
<span>{{ hero.name }} </span>
<span class="edit"
@click="editHero(hero)">edit</span>
</li>
...
</ul>
<chosen-heroes :heroes="heroes" />
</div>
</template>
<script>
import ChosenHeroes from "./components/ChosenHeroes.vue";
export default {
components: {
"chosen-heroes" : ChosenHeroes
},
data() {
return {
heroes: [
{ name: "Superman" },
{ name: "Batman" },
{ name: "Aquaman" },
{ name: "Wonder Woman" },
{ name: "Green Lantern" },
{ name: "Martian Manhunter" },
{ name: "Flash" }
],
newName: "",
isEdit: false,
heroToModify: null
};
...
</script>