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的其余部分正在渲染，但下拉组件“ mission-planner”却没有。我什至尝试将“ mission-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（）函数，因此您可以将列表与对象保持在一起。如果直接在数组中写入名称，则可以将其删除。

编辑：最好的办法可能是在此处使用计算属性，以使其更可重用，并将此长表达式从v-if中删除：

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

然后

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

Vuejs组件未注册，但未呈现

1 个答案: