Vue Component does not render...Renders as empty HTML comment

Question

Problem:

Vue component renders on screen as

Setup:

Application is in C# Core 2.0
Vue version 2.5.16
Use gulp to copy static js files to /wwwroot
gulp.src('./node_modules/vue/dist/vue.min.js') .pipe(gulp.dest('./wwwroot/dist/'))
Call to load Vue in HTML
<script src="~/dist/vue.min.js" asp-append-version="true"></script>
I have four components. Two use string literal templates and two use <template>. Of the later, only one displays.
<template id="paging-template"></template> <template id="modal-template"></template>

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

Modal is called with <modal></modal> and Paging with <paging></paging>.

Modal displays properly. Paging displays as  but using the Vue debugger addon in Chrome I can see the model and everything for the Paging component is there.

What am I missing?

Edit: JSFiddle Link

This css is not mine, just the default on the Vue template they provide

Can you display the syntax for your index.html and application.vue or main vue page. — Greg
– Greg, Commented May 10, 2018 at 21:09
You haven't provided enough information for us to determine what the problem is. — Decade Moon
– Decade Moon, Commented May 10, 2018 at 22:13
I do not have any .vue files. My Vue model is instantiated in a regular .js file loaded to the page. If not enough information was provided could you please specify what information you are looking for? — tralmix
– tralmix, Commented May 11, 2018 at 0:15

peinearydevelopment · Accepted Answer · 2018-05-11 14:23:27Z

1

There are a number of things wrong with your example(All of them are visible in the console tab of the browser):

Your class binding syntax is incorrect. All instances where you are trying to bind classes as follows:

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

Should be updated to:

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

isNumber is not a method. It can be replaced with !Number.isNaN(

Updated JSFiddle

answered May 11, 2018 at 14:23

peinearydevelopment

11.5k5 gold badges52 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tralmix Over a year ago

My hero...I had spent so much time staring at the code I had become blind to these obvious mistakes. And sadly my console wasn't showing any errors.

Collectives™ on Stack Overflow

Vue Component does not render...Renders as empty HTML comment

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related