Vuejs组件虽然已注册，但未呈现

Question

我在一个单页面组件.vue文件中有一个名为"MissionPlanner“的下拉组件，我在我的App.vue文件中注册了它

App.vue

import MissionPlanner from "./MissionPlanner.vue";

export default {
  name: "app",
  components: {
      ...,
    "mission-planner": MissionPlanner
  }
...
<template>
   <mission-planner/>
</template

但是当我尝试运行vue应用程序时，它根本没有显示我的组件。我确实看到我的模板html的其余部分正在呈现，但没有下拉组件“the planner”。我甚至尝试将“任务规划器”标记名的大小写改为"MissionPlanner“，但仍然没有结果。

这也是我的main.js

new Vue({
  render: h => h(App),
  components: {
    "mission-planner": require("./MissionPlanner.vue")
  } //tried registering it globally but it is not working
}).$mount('#app')

更新:好的，仔细看看控制台，我看到了几个错误，但不确定它们是什么意思：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "chosen" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://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
renderList @ vue.runtime.esm.js?2b0e:2630
render @ MissionPlanner.vue?93e1:16
Vue._render @ vue.runtime.esm.js?2b0e:3548
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
Watcher @ vue.runtime.esm.js?2b0e:4468
mountComponent @ vue.runtime.esm.js?2b0e:4073
Vue.$mount @ vue.runtime.esm.js?2b0e:8415
init @ vue.runtime.esm.js?2b0e:3118
createComponent @ vue.runtime.esm.js?2b0e:5978
createElm @ vue.runtime.esm.js?2b0e:5925
createChildren @ vue.runtime.esm.js?2b0e:6053
createElm @ vue.runtime.esm.js?2b0e:5954
patch @ vue.runtime.esm.js?2b0e:6477
Vue._update @ vue.runtime.esm.js?2b0e:3945
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
Watcher @ vue.runtime.esm.js?2b0e:4468
mountComponent @ vue.runtime.esm.js?2b0e:4073
Vue.$mount @ vue.runtime.esm.js?2b0e:8415
init @ vue.runtime.esm.js?2b0e:3118
createComponent @ vue.runtime.esm.js?2b0e:5978
createElm @ vue.runtime.esm.js?2b0e:5925
patch @ vue.runtime.esm.js?2b0e:6516
Vue._update @ vue.runtime.esm.js?2b0e:3945
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
Watcher @ vue.runtime.esm.js?2b0e:4468
mountComponent @ vue.runtime.esm.js?2b0e:4073
Vue.$mount @ vue.runtime.esm.js?2b0e:8415
eval @ main.js?56d7:8
./src/main.js @ app.js:1366
__webpack_require__ @ app.js:785
fn @ app.js:151
1 @ app.js:1379
__webpack_require__ @ app.js:785
checkDeferredModules @ app.js:46
(anonymous) @ app.js:861
(anonymous) @ app.js:864
Show 13 more frames
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot use 'in' operator to search for '#<Object>' in NaN"

found in

---> <MissionPlanner> at src/MissionPlanner.vue
       <App> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
Vue._render @ vue.runtime.esm.js?2b0e:3550
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
Watcher @ vue.runtime.esm.js?2b0e:4468
mountComponent @ vue.runtime.esm.js?2b0e:4073
Vue.$mount @ vue.runtime.esm.js?2b0e:8415
init @ vue.runtime.esm.js?2b0e:3118
createComponent @ vue.runtime.esm.js?2b0e:5978
createElm @ vue.runtime.esm.js?2b0e:5925
createChildren @ vue.runtime.esm.js?2b0e:6053
createElm @ vue.runtime.esm.js?2b0e:5954
patch @ vue.runtime.esm.js?2b0e:6477
Vue._update @ vue.runtime.esm.js?2b0e:3945
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
Watcher @ vue.runtime.esm.js?2b0e:4468
mountComponent @ vue.runtime.esm.js?2b0e:4073
Vue.$mount @ vue.runtime.esm.js?2b0e:8415
init @ vue.runtime.esm.js?2b0e:3118
createComponent @ vue.runtime.esm.js?2b0e:5978
createElm @ vue.runtime.esm.js?2b0e:5925
patch @ vue.runtime.esm.js?2b0e:6516
Vue._update @ vue.runtime.esm.js?2b0e:3945
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
Watcher @ vue.runtime.esm.js?2b0e:4468
mountComponent @ vue.runtime.esm.js?2b0e:4073
Vue.$mount @ vue.runtime.esm.js?2b0e:8415
eval @ main.js?56d7:8
./src/main.js @ app.js:1366
__webpack_require__ @ app.js:785
fn @ app.js:151
1 @ app.js:1379
__webpack_require__ @ app.js:785
checkDeferredModules @ app.js:46
(anonymous) @ app.js:861
(anonymous) @ app.js:864
Show 11 more frames
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot use 'in' operator to search for '#<Object>' in NaN
    at eval (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"aeb9565a-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/MissionPlanner.vue?vue&type=template&id=e2c8c042&scoped=true& (app.js:946), <anonymous>:21:20)
    at Proxy.renderList (vue.runtime.esm.js?2b0e:2630)
    at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"aeb9565a-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/MissionPlanner.vue?vue&type=template&id=e2c8c042&scoped=true& (app.js:946), <anonymous>:19:15)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at new Watcher (vue.runtime.esm.js?2b0e:4468)
    at mountComponent (vue.runtime.esm.js?2b0e:4073)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415)
    at init (vue.runtime.esm.js?2b0e:3118)

第一个错误是关于“反应属性”的。我不确定这些错误意味着什么。这是我的MissionPlanner.vue模板和脚本

<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">✔ &nbsp;</span>

        <span>{{ hero.name }}&nbsp;</span>
        <span class="edit"
              @click="editHero(hero)">edit</span>
      </li>
      <br>
      <input type="text"
             placeholder="new name"
             v-model="newName"
             v-if="isEdit"
             @keyup.enter="changeName"
             @blur="clear">
      <br>
      <span v-if="isEdit">enter to submit, click outside the box to cancel</span>
    </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>

Answer 1

<span v-if="hero in chosen-heroes.chosenHeroes">✔ &nbsp;</span>

以下是在渲染过程中引用但未在实例上定义的选择。我猜你想看看这位英雄是不是也在这份名单里

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
}

您可以在v-if中编写任何javascript表达式，因此您可以尝试：

<span v-if="heroes.map(heroObject => heroObject.name).includes(hero.name)">✔ &nbsp;</span>

我在这里使用了Array.map()函数，这样您就可以保存包含对象的列表。如果您直接在数组中写入名称，则可以将其删除。

EDIT:最好的办法可能是在这里使用计算属性，使其更具可重用性，并从v-if中去掉这个长表达式：

isInList(heroName) {
  return this.heroes.map(heroObject => heroObject.name).includes(heroName);
}

然后

<span v-if="isInList(hero.name)">✔ &nbsp;</span>