使用道具 vuejs + symfony答案

【问题标题】：Use props vuejs + symfony使用道具 vuejs + symfony
【发布时间】：2019-03-02 16:50:32
【问题描述】：

我希望在 twig 的 url 中检索变量传递，以将其发送到 VueJS 以调用 API。但是当我使用 Vuejs 的 PROPS 时它不起作用。

这是我的树枝模板：

{% block body %}
    <Realmstatus v-bind:region="{{ app.request.get('_route_params')['region'] | escape('js') }}"></Realmstatus>
{% endblock %}

App.js：

import Vue from 'vue';

import Realmstatus from './components/Realmstatus';

/**
 * Create a fresh Vue Application instance
 */
new Vue({
    el: '#app',
    render: h => h(Realmstatus)
});

Realmstatus.vue

    <template>
       <div>
    <p>{{ region }}</p>
           <p> {{ info }}</p>
       </div>
</template>

<script>
    import axios from 'axios';

    export default {
        data () {
            return {
                info: null
            }
        },
        props: ['region'],
        mounted () {
            axios
                .get('https://eu.api.battle.net/wow/realm/status?locale=fr_FR&apikey=wgxwm68tvdvrs4v77s8rfa6jf52tx4tn')
                .then(response => (this.info = response))
        }
    }
</script>

<style scoped>

</style>

我找不到错误的来源。你能帮帮我吗？

【问题讨论】：

你得到什么错误？
您是否尝试记录此{{ app.request.get('_route_params')['region'] | escape('js') }} 检查区域是否顺利到达这里...
该区域很好地到达了它在侧面看到它没有发生
您知道问题出在哪里吗？谢谢

标签： vue.js symfony4

【解决方案1】：

由于 VueJS 的默认分隔符与您在 twig 模板中使用的分隔符冲突，因此引发错误。

您可以更改 Vue 实例上的分隔符：

new Vue({
  delimiters: ['${', '}']
})

如果您想影响所有实例，则可以在全局范围内

Vue.config.delimiters = ['${', '}'];

然后您可以并排使用两个模板引擎：

<h1>{{ twig_variable }}</h1>
<p>${ vue_variable }<p>

来源：https://blog.elao.com/fr/dev/comment-integrer-vue-js-application-symfony/

【讨论】：

由您决定使用最适合您需要的分隔符。