Vue Component не отображается ... Отображается как пустой комментарий 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/'))
• Позвоните, чтобы загрузить Vue в HTML
  <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> и пейджинг с <paging></paging>.

Модал отображается правильно. Пейджинг отображается как <!---->, но с помощью аддона отладчика Vue в Chrome я вижу модель, и все для компонента Пейджинг есть.

Что мне не хватает?

Edit: JSFiddle Link

Этот css не мой, просто по умолчанию для шаблона Vue, который они предоставляют

Answer 1

В вашем примере есть несколько ошибок (все они видны на вкладке консоли браузера):

Ваш синтаксис привязки классов неверен.Все случаи, когда вы пытаетесь связать классы следующим образом:

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

Должны быть обновлены до:

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

isNumber не является методом.Его можно заменить на !Number.isNaN(

Обновлено JSFiddle