Konstantin18ko
@Konstantin18ko
Стоматолог

Почему не отображает компонент VueJS?

HTML
<div class="card" id="patient_history">
    <div class="row container-fluid">
        <div class="col-9">
            <div class="col-12">
                <analyzes></analyzes>
            </div>
        </div>
    </div>
</div>
<template id="analyzes-template">
    <div v-show="active_analyzes_template">
        Анализы
    </div>
    <a class="btn btn-sm btn-outline-success" @click="openTemplate()">НАЗНАЧИТЬ АНАЛИЗЫ</a>
</template>

JS
Vue.component('analyzes', {
    template: '#analyzes-template',
    data: function () {
        return {
            active_analyzes_template: false,
        }
    },
    methods: {
        openTemplate: function () {
            this.active_analyzes_template = true
        },
        closeTemplate: function () {
            this.active_analyzes_template = false
        },
        onCancel: function () {
            this.close()
        },
        onConfirm: function () {
            this.close()
        }
    }
})

Vue.filter('printFormatDate', function (date) {
    if (!date) {
        return ''
    } else {
        return moment(date).format("DD.MM.YYYY")
    }
})

new Vue({
    delimiters: ['{>', '<}'],
    el: '#patient_history',
    data() {
        return {
            active_analyzes_template: false,
            patient: null,
            disease_history: null,
            form003y_str1: null,
            form003y_str2: null,
            form003y_str3: null,
            form003y_str4: null,
            form003y_str5s: null,
            form003y_str6: null,
            form003y_str7: null,
            operations: null,
        }
    },
    methods: {},
})

При загрузке страницы получается есть только блок div, ссылки нет.
<div style="display: none;">
        Анализы
</div>
{# ТУТ ДОЛЖНА БЫТЬ ССЫЛКА #}
  • Вопрос задан
  • 181 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Как минимум, косяк в том, что корневой элемент должен быть один, а у вас их два. Это я про шаблон #analyzes-template - добавьте существующим элементам общий родительский:

<template id="analyzes-template">
  <div>
    <div v-show="active_analyzes_template">
        Анализы
    </div>
    <a class="btn btn-sm btn-outline-success" @click="openTemplate()">НАЗНАЧИТЬ АНАЛИЗЫ</a>
  </div>
</template>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы