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

【问题标题】：How to pass a variable from twig to vueJS (symfony 2.8 and VueJS 2)如何将变量从 twig 传递给 vueJS（symfony 2.8 和 VueJS 2）
【发布时间】：2018-08-29 17:25:47
【问题描述】：

我有一个 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 变量作为 props 传递给 vueJs ？

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

【问题讨论】：

你找到解决办法了吗？

标签： javascript php symfony vue.js twig

【解决方案1】：

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

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

您可以使用 twig 进行整体渲染：

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

因此，您将避免 vue 和 twig 之间的分隔符冲突。

由于值直接来自 twig，它可能不会随时更改，因为它是在后端生成的 - 而不是在某些 vue 源中 - 所以你不需要绑定它，只需像这样传递它：

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

【讨论】：

【解决方案2】：

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

【讨论】：

抱歉，我忘记在我的 .vue 文件中写下我已经定义了 props 属性。我已经更新了我的问题。
你有安装 vue DevTools 吗？如果是这样，请转到根目录并检查 paymentMethods 显示的内容。 @StefanGramadnikov
哎呀从:paymentMethods 中删除: 它应该只是paymentMethods
两种方法都试过了，不同的是:的属性是动态的，但在我的情况下没关系。
当你使用 : 它会认为它是一个 vue 变量。

【解决方案3】：

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

paymentMethods 这样的 CamelCased props 在 html 中转换为连字符大小写，可以这样使用：

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

【讨论】：

【解决方案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)

【讨论】：