c# - Vue 组件不呈现...呈现为空 HTML 注释

Question

问题:

• Vue 组件在屏幕上呈现为 <!---->

设置:

• 应用程序是 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> .

模态显示正常。分页显示为<!---->但是在 Chrome 中使用 Vue 调试器插件，我可以看到模型和 Paging 组件的所有内容。

我错过了什么？

编辑: JSFiddle Link

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

Answer 1

你的例子有很多问题(所有这些都在浏览器的控制台选项卡中可见):

您的类绑定(bind)语法不正确。您尝试按如下方式绑定(bind)类的所有实例:

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

应该更新为:

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

isNumber 不是方法。可以用!Number.isNaN(

代替

已更新 JSFiddle