Почему не рендерит VueJS компонент?

Question

[Konstantin Malyarov]

Vue.component('tokens-vmp', {
    data() {
        return {
            tokens_VMP: []
        }
    },
    template: '<table class="table table-of-contents col-12">' +
    '<tr class="table-info">' +
    '<th>№ талона</th>' +
    '<th>Ф.И.О.</th>' +
    '<th>Дата рождения</th>' +
    '<th>Этап</th>' +
    '<th>Дата последнего сохранения</th>' +
    '<th>Вид при обращении</th>' +
    '<th>Номер страхового полиса</th>' +
    '<th>Группа</th>' +
    '<th>Код МО</th>' +
    '<th>Субъект РФ</th>' +
    '<th>СНИЛС</th>' +
    '<th>Профиль</th>' +
    '<th>Вид при выписке</th>' +
    '<th>Диагноз</th>' +
    '<th>Диагноз при выписке</th>' +
    '<th>Обращение</th>' +
    '<th>Дата создания</th>' +
    '<th>Комментарии</th>' +
    '<th>Комментарии к талонам прошлого года</th>' +
    '<th>Информация</th>' +
    '<th>Метка</th>' +
    '<th>Дата планируемой госпитализации</th>' +
    '<th>Дата направления документов в МО</th>' +
    '<th>Дата обращения в МО</th>' +
    '<th>Дата выписки</th>' +
    '<th>ID пациента</th>' +
    '<th>Код категории льготы</th>' +
    '<th>Социальная группа</th>' +
    '<th>Пол</th>' +
    '<th>Результат госпитализации</th>' +
    '<th>Дата регистрации</th>' +
    '<th>Направлен</th>' +
    '<th>Место жительства</th>' +
    '<th>Отказано</th>' +
    '<th>Дата операции</th>' +
    '<th>Дата повторной госпитализации</th>' +
    '<th>Метод лечения</th>' +
    '<th>Модель</th>' +
    '<th>Код модели</th>' +
    '<th>Госпитализирован в отделение</th>' +
    '<th>Прикрепленные документы</th>' +
    '<th>Наименование МО</th>' +
    '<th>Полное наименование МО</th>' +
    '</tr>' +
    '<tbody>' +
    '<tr v-for="token_VMP in tokens_VMP">' +
    '<td>1</td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '<td></td>' +
    '</tr>' +
    '</tbody>' +
    '</table>',
    beforeCreate: function () {
        var self = this
        //Получение всех талонов ВМП
        axios.get('http://' + window.location.host + '/api/tokens_VMP/').then(function (response) {
            console.log('start')
            self.tokens_VMP = response.data
            console.log(self.tokens_VMP)
            console.log('end')
        }).catch(function (error) {
            console.log(error);
        });
    },
    mounted(){

    }
})

new Vue({
    el: '#operators_home'
})

В консоли результат есть, а по факту ничего нет.

Answer 1

[Антон Швец]

А чего у вас в div#operators_home?
И еще th помещаются внутрь thead, хотя это не критично.

И на какой результат вы рассчитывете? У вас в шаблоне нет вывода никаких данных

Comments

[Konstantin Malyarov]

Антон

{% load staticfiles %}
<div id="operators_home" class="col-12 row">
    <div class="col-2">
        <h5>Фильтры</h5>
    </div>
    <div class="col-10" style="overflow-x: auto">
        <h5>Талоны</h5>
        <tokens-vmp></tokens-vmp>
    </div>
</div>
<script src="{% static 'staff/operator/home.js' %}"></script>

[Антон Швец]

Konstantin Malyarov, получившуюся разметку посмотрите в инструментах разработчика, думаю понятнее станет что происходит.

[Konstantin Malyarov]

Антон,
<div>{{tokens_VMP}}</div>
Получу
[]
Как итог, проблема не в коде, а в том что переменная пустая, даже после получения информации.

[Антон Швец]

Konstantin Malyarov, а если

mounted () {
  axios.get('http://' + window.location.host + '/api/tokens_VMP/')
    .then(({ data }) => this.tokens_VMP = data)
    .catch((error) => console.log(error));
},

[Konstantin Malyarov]

Антон, не спасло.

Answer 2

[Алексей Шашенков]

this.$set(this,'tokens_VMP', data)
или
this.tokens_VMP.push(...data)
https://ru.vuejs.org/v2/guide/reactivity.html#%D0%...