Vue元素未显示

Question

我正在尝试使用HTML正文中的template元素创建Vue元素。直到我尝试将它们中的两个一起使用之前，它运行得非常好。

<template id="root-template">
  <div>
    <app-navbar targetId="#app-sidenav" />
    <app-header />
  </div>
</template>

[由于某种原因，注释掉app-navbar会显示app-header，但是如果显示app-navbar，则根本不会显示app-header！这完全让我难过。

const Navbar = Vue.component("app-navbar", {
  name: "app-navbar",
  template: "#navbar-template",
  props: {
    targetId: {
      type: String,
      default: "#app-sidenav"
    }
  },
  mounted() {
    this.sidenav = M.Sidenav.init(document.querySelector(this.targetId));
  },
});

const Header = Vue.component("app-header", {
  name: "app-header",
  template: "#header-template"
});

const AppRoot = Vue.component("app-root", {
  template: "#root-template",
  components: {
    Navbar,
    Header
  },
});

const store = new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {}
});

const app = new Vue({
  el: "#app",
  store,
  render: h => h(AppRoot)
});

<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&type=.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ul class="sidenav" id="app-sidenav">
  <li><a href="#">Sass</a></li>
  <li><a href="#">Components</a></li>
  <li><a href="#">Javascript</a></li>
  <li><a href="#">Mobile</a></li>
</ul>
<div id="app" />
<template id="navbar-template">
  <nav>
    <div class="nav-wrapper container">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-target="app-sidenav" class="sidenav-trigger">
        <i class="material-icons">menu</i>
      </a>
      <ul class="right hide-on-med-and-down">
        <li><a href="#">Sass</a></li>
        <li><a href="#">Components</a></li>
        <li><a href="#">Javascript</a></li>
        <li><a href="#">Mobile</a></li>
      </ul>
    </div>
  </nav>
</template>
<template id="header-template">
  <div class="section no-pad-bot" id="index-banner">
    <div class="container">
      <br /><br />
      <h1 class="header center orange-text">Todos</h1>
      <div class="row center">
        <h5 class="header col s12 light">
          A modern responsive front-end framework based on Material Design
        </h5>
      </div>
      <div class="row center">
        <a href="http://materializecss.com/getting-started.html" id="download-button"
          class="btn-large waves-effect waves-light orange">Get Started</a>
      </div>
      <br /><br />
    </div>
  </div>
</template>
<template id="root-template">
  <div>
    <app-navbar target-id="#app-sidenav" />
    <app-header />
  </div>
</template>

我也将其转换为Pen。谁能告诉我为什么会这样吗？

Answer 1

不要在常规HTML文件中使用自动关闭标签。如果您更改这些行：

<app-navbar target-id="#app-sidenav" />
<app-header />

至：

<app-navbar target-id="#app-sidenav"></app-navbar>
<app-header></app-header>

它将起作用。