<!DOCTYPE html>
<html lang="en">
<head>
<title>Консультация</title>
{% load staticfiles %}
<script src="{% static 'vue/vue.min.js' %}"></script>
<script src="{% static 'axios/axios.min.js' %}"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
p {
padding: 10px;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 35%;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 65%;
}
</style>
</head>
<body id="consultation">
<div class="left">
<consultation :patient_id="{{ patient.id }}"></consultation>
</div>
<div class="right">
Текст
</div>
</body>
<script src="{% static 'patient/consultation.js' %}"></script>
</html>
Один корневой элемент.
Vue.component('consultation', {
data() {
return {
patient: null
}
},
prop: ['patient_id'],
template: '<div>TEST</div>',
beforeCreate() {
console.log('test')
}
})
new Vue({
el: '#consultation',
})