Передача данных Vue.js в html шаблон

Question

Необходимо вывести на страницу список данных из БД.

Делаю следующим образом:

refbook.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Django Vue Integration</title>
</head>
<body>
<div id="refbook">
    <ol>
        <li v-for="catalog in catalogs">
            ID: {{ catalog.id }}
            <br>
            OID: {{ catalog.oid }}
            <br>
            Name: {{ catalog.name }}
            <br>
            Description: {{ catalog.description }}
        </li>
    </ol>
</div>
</body>
</html>

refbook.js

import Vue from 'vue'
import axios from 'axios'


new Vue({
    el: '#refbook',
    data: {
        catalogs: [],
    },
    created: function () {
        const vm = this;
        axios
            .get('/nsi/refbook')
            .then(function (response) {
                vm.catalogs = response.data
            })
    }
});

На странице отображаются только наименования столбцов:

Почему так происходит? Как мне вывести нужные данные?

БЛОГ НА HUSL

Передача данных Vue.js в html шаблон

Ответы (0 шт):