Question

我有一个symfony 2.8应用程序，最近我将VueJs 2集成为我的前端框架，因为它提供了很大的灵活性。我的应用程序不是单页，我使用symfony控制器来呈现视图。所有视图都包裹在基本树枝布局中：

<!DOCTYPE html>
<html lang="{{ app.request.locale|split('_')[0] }}">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

</head>
<body>

<div id="app">
    {% block body %} {% endblock %}
</div>

<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="/js/fos_js_routes.js"></script>

<script type="text/javascript" src="{{ asset('build/vendor-bundle.js') }}"></script>
<script type="text/javascript" src="{{ asset('build/vue-bundle.js') }}"></script>

</body>
</html>

我使用webpack加载大部分JS，我的所有vue组件和JS依赖项都在vendor-bundle.js和vue-bundle.js中编译。我的VueJs实例看起来像这样：

import './components-dir/component.vue'
import './components-dir/component2.vue'

Vue.component('component', Component);
Vue.component('component2', Component2);

window.onload = function () {
new Vue({
        el: '#app',
        components: {}
    });
};

我想将一些php变量从控制器传递给vuejs组件，但我无法让它工作。

一个非常简单的控制器示例如下所示：

    /**
     * @Route("/contract", name="contract")
     * @Method("GET")
     */
    public function indexAction()
    {
        $paymentMethods = PaymentMethod::getChoices();

        return $this->render('contracts/index.html.twig', [
            'paymentMethods'   => $serializer->normalize($paymentMethods, 'json'),
        ]);
    }

所有html，css和js都由vueJs处理。树枝视图如下所示：

{% extends 'vue-base.html.twig' %}
{% block body %}
    <contracts :paymentMethods="{{paymentMethods | raw}}"></contracts>
{% endblock %}

contracts.vue组件如下所示：

<template>
    <div>
        <p>Hi from component</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        },
        props: ['paymentMethods'],
        mounted: function () {
            console.log(this.paymentMethods)
        }
    }
</script>
<style>
</style>

如何将php变量作为道具传递给vueJs？

在上面的示例中，我没有收到任何错误，但该属性未传递给vuejs。控制台日志打印undefined。我希望能够做到这一点，因为我不想拥有SPA，但我也希望将一些变量从symfony传递给vue，因为我不需要提出额外的请求。

Answer 1

不是将Twig变量作为Vue attr的值传递：

<contracts :payment-methods="{{ twigVar}}"></contracts>

您可以使用树枝渲染整个图像：

<contracts {{ ':payment-methods="' ~ twigVar ~ '"' }}></contracts>

由于这一点，您将避免在vue和嫩枝之间出现厚度冲突。

由于值直接来自树枝，因此它可能不会随时间变化，因为它是在后端生成的-不在某些vue源中-因此您不需要绑定它，只需像下面那样传递它即可： / p>

<contracts payment-methods="{{ twigVar}}"></contracts>

Answer 2

您需要将以下内容添加到.vue文件props: ['paymentMethods']中，请参阅以下网址以获取完整文档https://vuejs.org/v2/guide/components.html#Passing-Data-with-Props

Answer 3

聚会可能要迟到了，但是如果有人遇到同样的问题，这里的问题就是外壳。

像paymentMethods这样的驼峰式道具在html中被转换成连字符号，并且可以这样使用：

<contracts :payment-methods="{{ paymentMethods | raw }}"></contracts>

Answer 4

将变量从 twig 传递到 Vue 应用程序的最简单方法是：

树枝：

<div id="app" data-foo="{{ foo }}" data-bar="{{ bar }}"></div>

JS：

import Vue from 'vue'

new Vue({
  el: '#app',
  data: {
    foo: '',
    bar: ''
  },
  template: '<div>foo = {{ foo }}</div><div>bar = {{ bar }}</div>',
  beforeMount: function() {
    this.foo = this.$el.attributes['data-foo'].value
    this.bar = this.$el.attributes['data-bar'].value
  }
})

如果您想使用 Vue 组件，可以通过以下方式进行：

树枝：

<div id="app" data-foo="{{ foo }}" data-bar="{{ bar }}"></div>

JS：

import Vue from 'vue'
import App from 'App'

new Vue({
  el: '#app',
  render(h) {
    return h(App, {
      props: {
        foo: this.$el.attributes['data-foo'].value,
        bar: this.$el.attributes['data-bar'].value,
      }
    })
  }
})

App.vue：

<template>
  <div>foo = {{ foo }}</div>
  <div>bar = {{ bar }}</div>
</template>

<script>
  export default {
    props: ['foo', 'bar'],
  }
</script>

请注意，如果您想传递数组，您应该先将它们转换为 json 格式：

树枝：

<div id="app" data-foo="{{ foo|json_encode }}"></div>

然后你应该解码json：

JS：

this.foo = JSON.parse(this.$el.attributes['data-foo'].value)

如何将变量从twig传递给vueJS（symfony 2.8和VueJS 2）

4 个答案: