如何將PHP smarty模板與Vue.js集成？

Question

我在PHP中使用Smarty模板引擎，並希望將VUE.js集成到我的應用程序中，但似乎Smarty不理解Vue.js語法（雙花括號）

代碼如下：

home.tpl

{include file="partials/header.tpl" title="Home"} 
<body data-spy="scroll" data-target=".navbar">
    <div class="se-pre-con"></div>

    {include file="partials/navbar.tpl"}   

    <div class="container container-body">
        <div class="row">
            <div class="col-md-12" id="app">
                <h2>Test Heading</h2>
                 {{ message }}
            </div>
        </div>
    </div>
{include file="partials/footer.tpl"}

footer.tpl

<script src="https://unpkg.com/vue"></script>
<script src="resource/js/app.js"></script>

app.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

錯誤信息：

Fatal error: Uncaught --> Smarty Compiler: Syntax error in template "file:\resource\html\templates\home.tpl" on line 11 "{{ message }}" - Unexpected "{ " <-- thrown in vendor\smarty\smarty\libs\sysplugins\smarty_internal_templatecompilerbase.php on line 11

任何幫助表示贊賞。 謝謝

Answer 1

在你的app.js使用delimiters

var app = new Vue({
    delimiters: ['%%', '%%'],
    el: '#app',
    data: {
        message: 'Hello Vue!'
    },
});

然后在帶有%% home.tpl包裝message

{include file="partials/header.tpl" title="Home"} 
<body data-spy="scroll" data-target=".navbar">
<div class="se-pre-con"></div>
    {include file="partials/navbar.tpl"}   
    <div class="container container-body">
        <div class="row">
            <div class="col-md-12" id="app">
                <h2>Test Heading</h2>
                 %% message %%
            </div>
        </div>
    </div>
{include file="partials/footer.tpl"}

如何將PHP smarty模板與Vue.js集成？

問題描述

1 個解決方案

解決方案1
12 已采納 2017-07-01 09:19:53

如何將PHP smarty模板與Vue.js集成？

問題描述

1 個解決方案

解決方案1 12 已采納 2017-07-01 09:19:53

解決方案1
12 已采納 2017-07-01 09:19:53