Ошибка Vue «Шаблоны должны отвечать только за сопоставление состояния с пользовательским интерфейсом»
Я использую Django webpack-loader для загрузки компонентов VueJS внутри моих шаблонов Django, в основном у меня есть следующий шаблон django:
myTemplate.html (это шаблон Django, из которого я вызываю vue)
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang = "en">
{% load static %}
{% block content %}
<head>
...
</head>
<body>
<div id = "app">
<div id = "someDjangoStuff">
...
</div>
<formComponent></formComponent>
<anotherVueComponent></anotherVueComponent>
<div id = "someDjangoStuff2">
...
</div>
</div>
<body>
{% endblock %}
</html>
Компоненты представляют собой базовые формы, например:
<template>
<div>
<form @submit.prevent = "formSubmit()">
<input type = "text" class = "form-control" v-model = "amount">
<br>
<input type = "text" class = "form-control" v-model = "price">
<button class = "btn btn-primary" >Submit</button>
</form>
</div>
</template>
Итак, в основном, что я здесь делаю:
- Я загружаю шаблон Django
- Я загружаю приложение Vue с помощью
<div id = "app"></div> - Вместо того, чтобы загружать все приложение Vue, я загружаю только те компоненты, которые мне нужны, а внутри
<div id = "app"></div>я также загружаю другой HTML-код.
Проблема в том, что в моей консоли я получу следующие ошибки:
[Vue warn]: Error compiling template:
Templates should only be responsible for mapping the state to the UI.
Я уверен, что это потому, что я загружаю приложение Vue, а внутри приложения я также загружаю другие теги html. Теперь эта ошибка не имеет никаких последствий, эта настройка, кажется, работает нормально, за исключением того, что у меня есть некоторые сомнения относительно того, правильный ли это способ использования Vue или нет.
- Есть ли способ подавить ошибку или сделать это по-другому, не получая ошибок?
- Может ли это создать проблемы, потому что я не должен использовать Vue?
Это очень простые компоненты, в которых есть только HTML, но нет скрипта или чего-то еще, что могло бы вызвать ошибку.
Возможный дубликат: stackoverflow.com/questions/38119088/…
Ваша ошибка выглядит так, будто вы манипулируете состоянием без фиксации обновлений. вам нужно больше узнать о Vuex.
Ответы 2
Вы не можете использовать компоненты Vue внутри шаблона Django. Вам нужно поместить весь код Vue в файл JS, а затем импортировать файл JS в Django.
В вашем шаблоне Django у вас может быть такой контейнер, как
<div id = "app"></div>
И в вашем коде Vue вы прикрепите приложение vue к этому контейнеру, например:
new Vue({
render: h => h(App),
}).$mount('#app')
В шаблоне django вы вообще не размещаете код Vue. Все это должно быть в Vue, а затем связанный файл javascript вставит весь соответствующий код внутри контейнера.
Кстати, django-webpack-loader больше не поддерживается. Я создал пакет для его замены под названием django-manifest-loader , который удовлетворит ваши потребности. К сожалению, я не писал об использовании его с Vue, но если вы используете webpack, большая часть документации будет сохранена. Запись в блоге, в которой рассказывается о настройке, находится здесь
Большое спасибо за ваш ответ! Какая разница с тем, что я делаю? В моем шаблоне у меня есть <div id = "app"></div>, как вы и сказали, но вместо рендеринга всего приложения vue я визуализирую только определенные компоненты в тех местах, где они мне нужны, и я m уже прикрепляю приложение к контейнеру, как вы упомянули
Webpack-loader не поддерживается, это действительно проблема, я рад, что вы предлагаете решение! Планируете ли вы создать руководство по Vue в будущем? Я хотел бы перейти к манифесту, но боюсь, что могу что-то сломать в своей настройке.
@ Jack022, вам нужна более конкретная помощь, чем может предоставить Stackoverflow. Вы не можете визуализировать определенные части приложения vue. Приложение Vue представляет собой полноценный модуль, вы либо встраиваете его в Django, либо нет. все приложение Vue монтируется в div, и вы не можете вставлять теги Vue в шаблон Django. Я оставлю еще один комментарий, когда буду писать туториал по Django/Vue. Внутри <div id = "app"></div> ничего не должно быть.
Так что в основном я делаю неправильно, добавляя только другие теги внутри <div id = "app"></div>, в то время как я должен иметь только <div id = "app"></div> или <div id= "приложение"><someVueComponent /></div>?
Хорошо!
если вы хотите использовать компоненты Vue вне контекста скомпилированного приложения Vue, вам необходимо:
- включите runTimeCompiler в конфигурацию vue и обратите внимание, что это увеличит вашу сборку примерно на 200 КБ.
// vue.config.js
module.exports = {
runtimeCompiler: true
}
- не отображать приложение JS при сборке
// main.js
// Vue 2
new Vue({
el:"#app",
// render: h => h(App) that what triggers your build error
render: process.env.NODE_ENV === 'development'?h => h(App):'' //render only while testing
});
// Vue3
const app = createApp({})
app.mount('#app')
// don't forget to register global components
- внутри вашего базового шаблона
<!DOCTYPE html>
<html>
<head>
{% load render_bundle from webpack_loader %}
{% load webpack_static from webpack_loader %}
{% render_bundle 'app' 'css' %}
</head>
<body>
<div id = "app">
{% block content %}
{% endblock %}
</div>
{% render_bundle 'app' 'js' %}
{% render_bundle 'chunk-vendors' 'js' %}
</body>
</html>
- затем обычно расширяйтесь от базового шаблона Django, как обычно
{% extends "base.html" %}
{% block content %}
<your-lovely-vue-component></your-lovely-vue-component>
{% endblock %}
и для полноты:
Вы можете вообще не использовать django-webpack-loader и полагаться на команду collectstatic, просто включите путь вашего приложения vue в настройки django.TEMPLATES.DIRS и установите для filenameHashing значение false в vue.config.js.
Однако я использую пакет лично и работает хорошо, обратите внимание, что в последней версии webpack-bundle-tracker есть некоторые проблемы, и я рекомендую ^0.4.3 .
В следующем видео об этом не говорится, но где-то вы лучше поймете, как интегрировать Vue с фреймворками MVC. https://laracasts.com/series/whats-new-in-vue-3/episodes/14
Привет 🍻
Это был очень полезный ответ! Большое спасибо! Если мне разрешено, у меня есть вопрос: поэтому в этом случае я загружаю приложение vue на этой странице HMTL, которая является страницей в моем проекте django. Теперь предположим, что мне нужно использовать Vue на другой странице того же проекта: должен ли я создать новое приложение Vue или можно использовать то же приложение, но только с нужными мне компонентами? Конечно, я не использую его для SPA
Итак, TL; DR: можно ли загружать одно и то же приложение Vue в разных шаблонах Django, но на каждой странице я загружаю только те компоненты, которые мне нужны для этой страницы?
пока вам не нужен spa, не визуализируйте приложение, и вы можете использовать его столько раз, сколько хотите, потому что вы уже включили компилятор времени выполнения, просто расширив базовый шаблон в Django. Другими словами, у вас есть vue-приложение, готовое управлять вашим DOM внутри шаблона Django. и да, если вы все еще хотите использовать спа, просто визуализируйте другой идентификатор элемента DOM, и вы можете создавать приложения столько, сколько хотите.
Какие у вас коды
someVueComponentиanotherVueComponent?