Question

我正在寻找在树枝的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>

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

Answer 1

抛出错误，因为VueJS的默认分隔符与您在树枝模板中使用的分隔符冲突。

您可以在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/

使用道具vuejs + symfony

1 个答案: