Javascript Vue.js使用给定的html数据

我是Vue新手，希望将我的项目从主要的jQuery更改为Vue。 现在我在努力导航。目前我正在使用

twig

来呈现我的链接+路径（symfony路由）

//代码简化

现在我需要一种方法来获取这些元素并使用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>

//app.js
从“Vue”导入Vue；
从“./components/App”导入应用程序；
新Vue({
渲染：h=>h（应用程序）
}).$mount（“#app”）//div#app是包装器，里面有其他所有东西
//App.vue
//添加更多组件-内容等
从“/SideNav”导入SideNav；
导出默认值{
名称：“应用程序”，
组成部分：{
侧导航
}
};
//SideNav.vue
使用模板从'/*库导入{自定义导航，自定义链接}-已存在*/'
导出默认值{
el:'侧导航'，
名称：“侧导航”
};

---

实现这一目标的最佳方式是什么？我希望继续使用symfony翻译和路由。

您可以使用应用程序/json将数据传递到VUEJ，同时保持良好的内容类型语义：

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

//细枝模板
//...
{{yourdata | json_encode}}
//...
//VueJS
//...
导出默认值{
el:'侧导航'，
名称：“SideNav”，
数据（）{
返回{
twigData:null
}
}
创建（）{
this.twigData=JSON.parse（document.getElementById（'twig-data'）.innerHTML）；
}
};
//...

这是否回答了您的问题@不，我正在尝试在我的vue中获取渲染的细枝数据（html），并重用它们来构建导航

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