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);
    }
 };
//...