时间戳

首页 > 解决方案 > 将数据从 PHP Twig 传递到 Vue 组件

laravel - 将数据从 PHP Twig 传递到 Vue 组件

问题描述

Vue 相对较新。喜欢它，但是各种来源的信息相互矛盾，这使得解决问题变得困难。

我的树枝文件中有以下代码：

<test-component data={{ test.jsonData() }}></test-component>

test.jsonData() 包含以下内容：

"{"name":"john","lastName":"doe"}"

到目前为止，一切都很好。我的 Vue 组件代码如下所示

<template>
  <div class="test">{{ data }}</div>
</template>

<script>
export default {
    props: {
        data: {
            type: String,
            default: "{}"
        }
    },
    mounted: function () {
        console.log(this.data);
  }
};
</script>

这会将数据打印为 json。现在，问题是，我怎样才能像 data.name 一样访问它？我需要改变什么？

标签： laravelvue.js

解决方案

除非我误解了您的问题，否则您的组件将接收data作为字符串的道具，即 json. 你可以尝试这样的事情：

<template>
    <div class="test">{{ dataObj.name }}</div>
</template>

<script>
    export default {
        props: {
            data: {
                type: String,
                default: "{}"
            }
        },
        data: function() {
            return {
                dataObj: JSON.parse(this.data),
            };
        },
        mounted: function () {
            console.log(this.dataObj);
        }
    },
</script>

如果您将 JSON 字符串传递给组件，您似乎只需要解析它并将其存储为要在模板中使用的数据对象。您还可以通过这种方式从值中创建计算属性：

<template>
    <div class="test">{{ dataObj.name }}</div>
</template>

<script>
    export default {
        props: {
            data: {
                type: String,
                default: "{}"
            }
        },
        computed: {
            dataObj: function() {
                return JSON.parse(this.data);
            };
        },
        mounted: function () {
            console.log(this.dataObj);
        }
    },
</script>

两者都应该允许您访问传入的 JSON 中的属性。

推荐阅读