Question

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一样访问它？我需要更改什么？

Answer 1

除非我对您的问题有误解，否则您的组件将收到一个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中的属性。

Answer 2

请勿使用“数据”作为道具，因为在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>

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

2 个答案: