Vue Component не отображается ... Отображается как пустой комментарий HTML - PullRequest
Новая
       6

Vue Component не отображается ... Отображается как пустой комментарий HTML

0 голосов
/ 11 мая 2018

Проблема:

  • Компонент 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, который они предоставляют

1 Ответ

0 голосов
/ 11 мая 2018

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

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

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

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

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

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

Обновлено JSFiddle

...