时间戳

首页 > 解决方案 > Vue没有在WP模板中的花括号中显示文本

wordpress - Vue没有在WP模板中的花括号中显示文本

问题描述

作为一个新手，我刚刚开始熟悉 Vue.js。我没有控制台错误，但文本并没有显示在大括号中，只是为了进行基本测试。

我在 WordPress 环境中，我所做的只是创建一个自定义模板来运行通过 Vue 显示文本的基本测试。在我的 HTML 文件中，我包含来自 CDN 的 Vue，然后内联运行此脚本。

var app = new Vue({
el: '#app',
data: {
  message: 'Hello Vue!'
},
mounted: function(){
    console.log("WP Vue Theme!");
}

})

HTML是：

<div id="app">

    <p>Value of the input is {{message}}</p>

</div>

显示的输出是：

输入值为 {{message}}。

在控制台中，我输入了 app.message，我得到了“Hello Vue！”。但由于某种原因，它没有在 HTML 中解析。

有任何想法吗？

标签： wordpressvue.js

解决方案

根据 Eli Chen 的评论，这就是答案。我让脚本在 HTML 之上运行：

您确定在 html 部分之后调用 new Vue(...) 吗？看起来 $el 不是正确的元素。还要检查你是否有另一个 id 为“app”的 div – eli chen 1 小时前

推荐阅读