Передача данных из PHP Twig в компонент Vue

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

Не используйте «данные» в качестве реквизита, поскольку в 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>

Answer 2

Если я не понимаю ваш вопрос, ваш компонент получает 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.