Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.07.2018, 21:28
Новичок на форуме
Отправить личное сообщение для SomebodySomeone Посмотреть профиль Найти все сообщения от SomebodySomeone
 
Регистрация: 22.06.2018
Сообщений: 6

Vue js. Не отображает конент.
Привет.
HTML код:
Код:
                <div id="app">
                <div class="cb-top-line">
                    <div class="cb-step cb-step--current" data-step="cb-item1" id="cb-step1" @click="switchView('ppicture')">
                        <p>
                            <span>1</span>
                            Изображение
                        </p>
                    </div>
                    <div class="cb-step" data-step="cb-item2" id="cb-step2" @click="switchView('rramka')">
                        <p>
                            <span>2</span>
                            Рама
                        </p>
                    </div>
                    <div class="cb-step" data-step="cb-item3" id="cb-step3" @click="switchView('ttitle')">
                        <p>
                            <span>3</span>
                            Заголовок
                        </p>
                    </div>
                    <div class="cb-step" data-step="cb-item4" id="cb-step4" @click="switchView('ffinger')">
                        <p>
                            <span>4</span>
                            Цвет отпечатков
                        </p>
                    </div>
                </div>
                </div>
Ну и дальше обернул 4 блока в тег <template> и дал каждому свой айди т.е (#ppicture-template и т.д).
После чего написал код на VUE.JS:
Код:
new Vue({
    el: '#app',
    data:{
        currentView: 'ppicture'
    },
    components: {
        ppicture: {
            template: '#ppicture-template'
        },

        rramka: {
            template: '#rramka-template'
        },

        ttitle: {
            template: '#ttitle-template'
        },

        ffinger: {
            template: '#ffinger-template'
        },
    },
    methods:{
        switchView: function(view){
            this.currentView = view;
        }
    }
})
Ну и в конце там где хочу видеть свои блоки написал:
<component :is="currentView"></component>.
В итоге ничего не отображаеться.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
BackEnd/FrontEnd Developer (Native JS) Abab Работа 0 25.12.2016 10:56
js стиль render для react.js vflash Ваши сайты и скрипты 5 01.04.2016 22:57
Не отображает русские буквы в JS polearmik Общие вопросы Javascript 5 21.07.2015 08:11
JS не отображает русские буквы.. Alexa1995 Общие вопросы Javascript 1 18.10.2013 21:43
Подгрузка JS + ajax... afr0 AJAX и COMET 8 10.04.2013 14:38