第一个 Vue 组件下方的内容无法呈现

Question

我正在开发一个增量游戏，我有三个 Vue 组件。我希望其中两个组件像兄弟元素一样显示。

我正在使用 Vue 2.6.10，我尝试渲染两个相邻的同级组件，但由于某种原因 vue 不解析组件。

这是我的 HTML。

   <div id="app">
        <nav-buttons :buttons="buttonMenu" />
        <tab-content>
            <linked-frame id="civilization">
                <nav-buttons :buttons="civilizationButtons" />
            </linked-frame>
            <linked-frame id="projects">
                <nav-buttons :buttons="projectButtons" />
            </linked-frame>
        </tab-content>
    </div>

这是我的 JS（使用 Vue）：

Vue.component("nav-buttons", {
    name: "nav-buttons",
    props: ["buttons"],
    template: `
        <ul class="nav nav-pills">
            <li v-for="button in buttons" class="nav-item">
                <a class="nav-link" data-toggle="pill" :href="'#'+button.name.toLowerCase()">{{button.name}}</a>
            </li>
        </ul>
    `
});

Vue.component("linked-frame", {
    name: "linked-frame",
    props: ["id"],
    template: `
        <div :id="id" class="container tab-pane">
            <slot></slot>
        </div>
    `
});

Vue.component("tab-content", {
    name: "tab-content",
    template: `
        <div class="tab-content">
            <slot></slot>
        </div>
    `
})

const app = new Vue({
    el: "#app",
    data: {
        buttonMenu: [{ name: "Civilization" }, { name: "Projects" }],
        projectButtons: [{ name: "Military" }, { name: "Science" }, { name: "Government" }, { name: "Socioeconomic" }],
        civilizationButtons: [{ name: "Population" }, { name: "Employment" }, { name: "Pending Projects" }]
    }
});

我希望在单击任一顶级按钮时看到第二个导航栏，但整个第二个组件甚至不会在最终的 html 中呈现：

<ul class="nav nav-pills">
<li class="nav-item">
<a data-toggle="pill" href="#civilization" class="nav-link active">Civilization</a>
</li>
<li class="nav-item">
<a data-toggle="pill" href="#projects" class="nav-link">Projects</a></li>
</ul>
<!--No div for the content!-->

Answer 1

这里的问题是您在 DOM 模板中使用了自闭合标签。您只想在 .vue、jsx 和 string templates 中使用自闭合标签，以便 vue 编译器可以处理它们。

在Vue documentation 中阅读更多相关信息以获取他们的风格指南。

你有两个选择。

在您的 index.html 中，将 <nav-buttons :buttons="buttonMenu" /> 替换为 <nav-buttons :buttons="buttonMenu"></nav-buttons>

代码片段

Vue.component("nav-buttons", {
  props: ["buttons"],
  template: `
        <ul class="nav nav-pills">
            <li v-for="button in buttons" :key="button.name" class="nav-item">
                <a class="nav-link">{{button.name}}</a>
            </li>
        </ul>
    `
});

Vue.component("linked-frame", {
  props: ["id"],
  template: `
        <div :id="id" class="container tab-pane">
            <slot></slot>
        </div>
    `
});

Vue.component("tab-content", {
  template: `
        <div class="tab-content">
            <slot></slot>
        </div>
    `
})

const app = new Vue({
  el: "#app",
  data: {
    buttonMenu: [{
      name: "Civilization"
    }, {
      name: "Projects"
    }],
    projectButtons: [{
      name: "Military"
    }, {
      name: "Science"
    }, {
      name: "Government"
    }, {
      name: "Socioeconomic"
    }],
    civilizationButtons: [{
      name: "Population"
    }, {
      name: "Employment"
    }, {
      name: "Pending Projects"
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <nav-buttons :buttons="buttonMenu"></nav-buttons>
  <tab-content>
    <linked-frame id="civilization">
      <nav-buttons :buttons="civilizationButtons" />
    </linked-frame>
    <linked-frame id="projects">
      <nav-buttons :buttons="projectButtons" />
    </linked-frame>
  </tab-content>
</div>

或者将应用模板移动到 Vue 定义中。

片段

Vue.component("nav-buttons", {
  props: ["buttons"],
  template: `
        <ul class="nav nav-pills">
            <li v-for="button in buttons" :key="button.name" class="nav-item">
                <a class="nav-link">{{button.name}}</a>
            </li>
        </ul>
    `
});

Vue.component("linked-frame", {
  props: ["id"],
  template: `
        <div :id="id" class="container tab-pane">
            <slot></slot>
        </div>
    `
});

Vue.component("tab-content", {
  template: `
        <div class="tab-content">
            <slot></slot>
        </div>
    `
})

const app = new Vue({
  el: "#app",
  template: `
<div>
  <nav-buttons :buttons="buttonMenu" />
  <tab-content>
    <linked-frame id="civilization">
      <nav-buttons :buttons="civilizationButtons" />
    </linked-frame>
    <linked-frame id="projects">
      <nav-buttons :buttons="projectButtons" />
    </linked-frame>
  </tab-content>
 </div>
  `,
  data: {
    buttonMenu: [{
      name: "Civilization"
    }, {
      name: "Projects"
    }],
    projectButtons: [{
      name: "Military"
    }, {
      name: "Science"
    }, {
      name: "Government"
    }, {
      name: "Socioeconomic"
    }],
    civilizationButtons: [{
      name: "Population"
    }, {
      name: "Employment"
    }, {
      name: "Pending Projects"
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>