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

Question

[Konstantin Malyarov]

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>
{# ТУТ ДОЛЖНА БЫТЬ ССЫЛКА #}

Answer 1

[0xD34F]

Как минимум, косяк в том, что корневой элемент должен быть один, а у вас их два. Это я про шаблон #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>

Comments

[Konstantin Malyarov]

0xD34F тут template за пределами родительского элемента и у парня работает.

[0xD34F]

Konstantin Malyarov, ещё раз - корневой элемент должен быть один. Один. А "у парня работает" - так там vue первой версии, видео от 7 августа 2016, vue 2 вышел в сентябре.

UPD. Первый же комментарий под видео:

Во Vue 2 столкнулся с двумя проблемами:
<...>
у компонента должен быть только один корневой элемент

Читайте, что люди пишут.

[Konstantin Malyarov]

0xD34F, у меня 2.5.13, и у меня работает, как у парня... Два корня.

Если я понял, то vue.component ищет по id элемент и ему пофиг где элемент в корне или за его пределами.

[0xD34F]

Konstantin Malyarov,

у меня 2.5.13, и у меня работает, как у парня... Два корня.

Этого быть не может, второй корневой элемент отбрасывается (а в консоль пишется при этом предупреждение, что корень должен быть один) - собственно, почему вы и задали ваш вопрос - "ссылки нет".

Кажется, вы под словосочетанием "корневой элемент" понимаете исключительно тот элемент, который указываете в свойстве el при создании экземпляра Vue. Это не совсем так, бывают и другие - у шаблонов компонентов тоже есть свои корневые элементы.