Vue.js 使用給定的 html 數據

Question

我是 Vue 的新手，想將我的項目從主要使用 jQuery 更改為 Vue。 現在我的導航很掙扎。 目前我正在使用twig來呈現我的鏈接 + 路徑（symfony 路由）。

//Code simplified
<nav>
      <ul>
          <li><a href="{{ path('app_home') }}">{{ 'home'|trans }}</a></li>
          <li><a href="{{ path('app_logout') }}">{{ 'logout'|trans }}</a></li>
      </ul>
</nav>

現在我需要一種方法來獲取這些元素並使用 vue 創建導航（vue 也用於模板）。

我目前有以下代碼：

//app.js
import Vue from 'vue';
import App from './components/App';

new Vue({
    render: h => h(App)
}).$mount('#app'); //div#app is the wrapper with everything else inside



//App.vue
<template>
    <SideNav></SideNav>
    //Add more components - content etc
</template>

<script>
    import SideNav from "./SideNav";

    export default {
        name: "App",
        components: {
            SideNav
        }
    };
</script>



//SideNav.vue
<template>
    <custom-nav>
        <custom-link></custom-link>
        <custom-link></custom-link>
    </custom-nav>
</template>

<script>
    import { custom-nav, custom-link } from '/*library with templates - already exists*/'
    export default {
        el: '#side-nav',
        name: "SideNav"
    };
</script>

實現這一目標的最佳方法是什么？ 我想繼續使用 symfony 翻譯和路由。

Answer 1

您可以使用 application/json 將數據傳遞給您的 VueJS，同時保持良好的 Content-Type 語義：

// Twig template
//...
 <script id="twig-data" type="application/json">{{yourdata|json_encode}}<script>
//...

// VueJS
//...
 export default {
    el: '#side-nav',
    name: "SideNav",
    data() {
        return {
            twigData: null
        }
    }
    created(){
        this.twigData = JSON.parse(document.getElementById('twig-data').innerHTML);
    }
 };
//...