文章/答案/技术大牛

发布

社区首页 >问答首页 >导入Vue (Vue.js)组件时不会出现错误，但不会显示

问导入Vue (Vue.js)组件时不会出现错误，但不会显示
EN

Stack Overflow用户

提问于 2017-07-13 04:02:27

回答 1查看 228关注 0票数 1

Vue在这里作为测试运行的基本实现，我在将数据分解为组件时遇到了一些问题。下面是HTML：

<body>
    <header id="main-header">
       <custom-header></custom-header>
    </header>
</body>

我正在实例化一个Vue实例，并将其绑定到#main-header：

import CustomHeader from '../header.vue';

const header = new Vue({
    el: '#main-header',
    data: chx,
    components: {
        'custom-header': CustomHeader
    },
    methods: {
        run: function() {
            console.log('run');
        },
        print: function() {
            window.print()
        },
        save: function() {
            console.log('save');
        }
    }
});

和导入的模板：

<template>
    <div class="header-menu">
        <img class="logo" src="images/logo.png">
    </div>
    <div class="header-menu">
        <h1 id="date-range-label"><span v-show="dates.startFormatted">{{dates.startFormatted}} - {{dates.endFormatted}}</span></h1>
        <i v-on:click="settingsVisible = !settingsVisible" id="settings" class="fa fa-2x fa-cog settings-icon no-print"></i>
    </div>
</template>

控制台或Webpack进程不会记录任何错误。不确定从这里到哪里，因为没有记录任何内容。HTML在生成的<header>中保持为空。

vue.js

webpack-2

webpack

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-13 04:28:26

您的自定义header组件在其模板的根目录下有两个div元素。一个组件只能有一个根元素。

在您的示例中，将内容包装在div元素中可能是最简单的方法：

<template>
  <div>
    <div class="header-menu">
      <img class="logo" src="images/logo.png">
    </div>
    <div class="header-menu">
      <h1 id="date-range-label"><span v-show="dates.startFormatted">{{dates.startFormatted}} - {{dates.endFormatted}}</span></h1>
      <i v-on:click="settingsVisible = !settingsVisible" id="settings" class="fa fa-2x fa-cog settings-icon no-print"></i>
    </div>
  </div>
</template>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45066562

复制

相似问题

问导入Vue (Vue.js)组件时不会出现错误，但不会显示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导入Vue (Vue.js)组件时不会出现错误，但不会显示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导入Vue (Vue.js)组件时不会出现错误，但不会显示
EN