无法与 django 代码一起运行 Vue.js 3

Posted 2023-02-23

【中文标题】无法与 django 代码一起运行 Vue.js 3

【英文标题】：Unable to run Vue.js 3 along with django code

【发布时间】：2021-05-30 15:42:33

【问题描述】：

我无法在我的 django 代码中加载 Vue.js 3。我使用了 CDN 中的 Vue。

Vue 导入：

<script src="https://unpkg.com/vue@next"></script>

html：

<table id="todaysappts" class="table table-bordered  ctype ">
    <thead class="tblheadercol2">
        <tr>
            % if "expired" in ctype %
            Appointments on  liveslist_date 

            % else %
            <strong>Today's Appointments</strong>
            % endif %
        </tr>
        <div class="row">
          <div class="col-md-24">
            Here: [[ message ]]
            </div>
            </div>
            <div class="row">
              <div class="col-md-24">
            Total: appt_total  Seen: appt_seen  Remaining: appt_not_seen 
          </div>
        </div>
        <tr>
            </tr>
            <tr>
            <th>Time</th>
            <th>Name</th>
            <th><i class="green far fa-mobile-android-alt fa-lg "></i></th>
        </tr>
    </thead>
    ... Snipped ...

JS：

console.log(`Vue code inserted`);
const app = Vue.createApp(
  delimiters: ["[[", "]]"],
  data() 
    return 
      message: "Hello Vue!",
    ;
  ,
  computed: ,
  methods: ,
);
app.mount("#todaysappts");

JS 控制台输出：

You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.
Vue code inserted

HTML 输出：

<div class="row">
    <div class="col-md-24">
    Here: [[ message ]]
    </div>
</div>

所以，我的变量消息没有被插值，变量名称正在打印，带有括号。我如何解决这个问题？显然 vue 已加载，并没有错误。

【问题讨论】：

用捆绑脚本 <script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script> 替换 <script src="https://unpkg.com/vue@next"></script> 将解决您的问题

【参考方案1】：

该应用正在尝试挂载到 ID 为 todaysappts 的不存在的 div。将 id 添加到根元素：

console.log(`Vue code inserted`);
const app = Vue.createApp(
delimiters: ["[[", "]]"],
data() 
    return 
    message: "Hello Vue!",
    ;
,
computed: ,
methods: ,
);
app.mount("#todaysappts");

<div id="todaysappts" class="row">
    <div class="col-md-24">
    Here: [[ message ]]
    </div>
</div>

<script src="https://unpkg.com/vue@next"></script>

帖子编辑后：另外，HTML 无效，因为有<div> 元素直接插入到表格模板中。

【讨论】：

很抱歉省略添加根元素。我编辑了更多代码

这是因为您的 HTML 无效。您不能将<div> 作为<table> 的直系后代，它应该在<tr> 和<td> 内。

你让我走上了正确的道路。 id 元素位于错误的祖先中。