Vue 组件不呈现...呈现为空 HTML 注释答案

【问题标题】：Vue Component does not render...Renders as empty HTML commentVue 组件不呈现...呈现为空 HTML 注释
【发布时间】：2018-10-21 05:28:06
【问题描述】：

问题：

设置：

应用程序在 C# Core 2.0 中
Vue 版本 2.5.16
使用gulp复制静态js文件到/wwwroot
gulp.src('./node_modules/vue/dist/vue.min.js') .pipe(gulp.dest('./wwwroot/dist/'))
调用以在 HTML 中加载 Vue
<script src="~/dist/vue.min.js" asp-append-version="true"></script>
我有四个组件。两个使用字符串文字模板，两个使用<template>。在后者中，只有一个显示。
<template id="paging-template"></template> <template id="modal-template"></template>

Vue.component('modal',{ template:'#modal-template'}); Vue.component('paging',{ template:'#paging-template'});

Modal 使用 <modal></modal> 调用，Paging 使用 <paging></paging>。

模态显示正确。分页显示为，但使用 Chrome 中的 Vue 调试器插件，我可以看到模型和分页组件的所有内容。

我错过了什么？

这个 css 不是我的，只是他们提供的 Vue 模板上的默认值

【问题讨论】：

【解决方案1】：

您的示例有很多问题（所有这些都在浏览器的控制台选项卡中可见）：

您的类绑定语法不正确。您尝试绑定类的所有实例如下：

v-bind:class="'disabled': previousDisabled"

应更新为：

v-bind:class="{disabled: previousDisabled}"

isNumber 不是一种方法。可以换成!Number.isNaN(

【讨论】：