Почему не рендерится? Vue.js

278

27 октября 2017, 14:34

Есть разметка:

<div id="consturctor">
  <cb-top-line>
    <cb-step class="cb-step--current" id="cb-step1" number="1" title="Изображение">
    </cb-step>
    <cb-step id="cb-step2" number="2" title="Рама">
    </cb-step>
    <cb-step id="cb-step3" number="3" title="Заголовок">
    </cb-step>
    <cb-step id="cb-step4" number="4" title="Цвет отпечатков">
    </cb-step>
  </cb-top-line>
</div>

Вот сами компоненты:

Vue.component('cb-top-line', {
    template: '<div class="cb-top-line"></div>'
})
Vue.component('cb-step', {
    props: ['number', 'title'],
    template: '<div class="cb-step"> \
                    <p> \
                        <span>{{ number }}</span> \
                        {{ title }}\
                    </p> \
               </div>'
})
let vm = new Vue({
    el: '#constructor'
})

В результате отображается пустой cb-top-line, без cb-step внутри.

Answer 1

Все рендерится. Вы в index написали разметку, vue находит элемент cb-top-line, он знает что это component. В результате он берет разметку которую вы написали в этом компоненте и вставляет ее. У вас написано

template: '<div class="cb-top-line"></div>'

Вот он и отображается пустой cb-top-line. Для вызова другого компонента, напишите вызов этого компонента в компоненте cb-top-line. Вот так это должно работать.

 Vue.component('cb-top-line', {
        template: '\
                   <div class="cb-top-line">\
                     <cb-step class="cb-step--current" id="cb-step1" number="1" title="Изображение">\
                     </cb-step>\
                     <cb-step id="cb-step2" number="2" title="Рама">\
                     </cb-step>\
                     <cb-step id="cb-step3" number="3" title="Заголовок">\
                     </cb-step>\
                     <cb-step id="cb-step4" number="4" title="Цвет отпечатков">\
                     </cb-step>\
                   </div>\
                 '
    })

Создание эксклюзивного проекта в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

extjs 5.1 возврат данных success в формате JSON

Всем доброго времени сутокПодскажите пожалуйста как решить следующую задачу

255

PHP

joomla 3.6 Создание полей ввода в админпанели

Я только осваиваю Joomla!

319

PHP

Нужна помощь в построении запроса в Eloquent ORM Laravel

Есть таблица постов posts (id, name), есть таблица тэгов tags (id, name)Связаны они между собой с помощью связи "многие ко многим", через вспомогательную...

386

PHP

Telegram API. Отправка сообщения с сервера

Доброго дня! Подскажите плиз как с сервера передать сообщение с необходимой информацией "самому себе", реально ли это вообще или только в Боты?

397