Передача данных из PHP / HTML в компонент .vue - PullRequest
Новая
       16

Передача данных из PHP / HTML в компонент .vue

0 голосов
/ 05 января 2019

То, что я пытаюсь сделать, кажется на первый взгляд простым, но я не могу понять это. В основном у меня есть 2 файла:

Файл PHP со следующим: 

...
<user-panel v-if="user.id  && loaded" v-bind:user="user" v-bind:name="theUserName"></user-panel>
...

Файл компонента .Vue со следующим (который компилируется в другой файл): 

<template>
    <span id="userPanel" class="d-flex align-items-center">
        <a href="#" role="button" class="user-dropdown-toggle">
            <div class="logged-in d-flex align-items-center">
                <span class="d-flex align-items-center justify-contnet-center"></span>
                {{name}}
            </div>
        </a>
    </span>
</template>

<script>
    export default {
        name: "UserPanel",
        props: ['user'],
        created () {
            console.log(this.$refs.myTestField.value)
        }
    }
</script>

Все, что я хотел бы сделать, это передать данные из PHP в Vue в {{name}} . Я пробовал v-bind, атрибут данных, скрытый ввод и т. Д. Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

0 голосов
/ 05 января 2019

Допустим, у вас есть переменная php, которая содержит строку. $phpString

PHP-файл 

...
<my-component v-bind:myProperty="<?php echo $phpString ?>"></my-component>
...

Не забудьте сбежать $phpString, прежде чем повторить его.

В вашем Vue определите свойство с именем myProperty: 

<template>
  <span>
    {{ myProperty }}
  </span>
</template>

<script>
export default {
  props: ['myProperty']
}
</script>
0 голосов
/ 05 января 2019

Vue отдельные компоненты файла обрабатываются на стороне клиента.

Есть SSR , однако, поскольку у вас есть php на вашем сервере, вы должны настроить службу REST, чтобы вы могли использовать fetch или axios для потреблять данные сервера и представлять их на стороне клиента.

...