时间戳

首页 > 解决方案 > Vue 错误“模板应该只负责将状态映射到 UI。”

django - Vue 错误“模板应该只负责将状态映射到 UI。”

问题描述

我正在使用 Django webpack-loader 在我的 Django 模板中加载 VueJS 组件，基本上我有以下 django 模板：

myTemplate.html（这是我调用 vue 的 Django 模板）

{% 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>

所以基本上我在这里做的是：

  1. 我加载了一个 Django 模板
  2. 我加载了 Vue 应用程序<div id="app"></div>
  3. 我只加载我需要的组件，而不是加载整个 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 的正确方法。

  1. 有什么方法可以抑制错误或以其他方式执行此操作而不会出现错误？
  2. 它会因为我不应该如何使用 Vue 而产生问题吗？

标签： djangovue.js

解决方案

你不能在这样的 Django 模板中使用 Vue 组件。你需要把所有的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，那么大部分文档都可以。指导您完成设置的博客文章在这里

推荐阅读