如何修复 Laravel Blade、Vuejs 和 Handlebars.js 分隔符（小胡子）问题？

Question

如果将 Handlebars.js 文件放置在 VueJs 容器 (#app) 中，则不会加载。

<script id="details-template" type="text/x-handlebars-template">
    <div class="label label-info"> @{{ domain }}'s Email</div>
</script>

我收到 Vue 引发的错误消息。

[Vue warn]: Property or method "domain" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

当我从容器中删除#app id 时，车把模板工作正常。 我试图更改 app.js 文件中的 VueJs 分隔符

const app = new Vue({
   el: '#app', 
   delimiters: ["<%","%>"]
});

那没起效。

有什么解决办法？

Answer 1

这是因为您的domain变量未定义，而您正试图在 HTML 中使用它。 您应该初始化变量然后使用它。 尝试这个：

const app = new Vue({
   el: '#app', 
   delimiters: ["<%","%>"],
   domain: null
});