vue.js - 使用 Prop vuejs + symfony

Question

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

这是我的 Twig 模板:

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

应用程序.js:

import Vue from 'vue';

import Realmstatus from './components/Realmstatus';

/**
 * Create a fresh Vue Application instance
 */
new Vue({
    el: '#app',
    render: h => h(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>

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

Answer 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/