代码之家 › 专栏 › 技术社区 › ThomasVdBerge

将数据从php-twig传递到vue组件

vue.js laravel

ThomasVdBerge · 技术社区 · 6 年前

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

我的twig文件中有以下代码:

<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那样访问它?我需要改变什么?

2 回复 | 直到 6 年前

matt 6 年前

除非我误解了你的问题,否则你的组件正在接收 data prop作为字符串,即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中的属性。

whmkr 6 年前

不要使用“data”作为道具,因为在Vue中,this.data将引用组件的特殊数据存储。我还添加了一个:在属性赋值前面,因为它将值放在JS上下文中,您可以在那里定义一个对象,然后在那里解析JSON字符串:

<test-component :person="JSON.parse({{person.jsonData()}})"></test-component>

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

<script>
export default {
    props: {
        person: {
            type: Object,
            default: null
        }
    },
    mounted: function () {
        console.log(this.person);
  }
};
</script>

推荐文章

Kostya Bronshteyn · Laravel在安装示例应用程序后无法运行web服务器

6 月前