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模板中使用了自闭标签。您只想在jsx，string templates和<nav-buttons :buttons="buttonMenu" />中使用自闭标签，以便vue编译器可以处理它们。

在Vue documentation中获取有关样式指南的更多信息。

您有两个选择。

在您的index.html中，将<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.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"
    }]
  }
});

或将应用模板移至Vue定义。

代码段

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

def getData(address, key):
    ...
    NW = geohash.decode(hashes.nw)
    SE = geohash.decode(hashes.ne)

    return pd.Series(dict(zip(fields, [NW.lat, NW.lon,  SE.lat, SE.lon])))

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

1 个答案: