Passing data from PHP/HTML to .vue Component

Question

What I'm trying to do is seemingly simple, but I can't seem to figure it out. Basically, I have 2 files:

A PHP file with the following:

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

A .Vue component file with the following (that gets compiled into another file):

<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>

All I'd like to do is pass data from the PHP to Vue into {{name}}. I've tried v-bind, a data-attribute, a hidden input, etc. Any help would be greatly appreciated.

Orkhan Alikhanov · Accepted Answer · 2019-01-05 04:56:26Z

2

Let's say you have a php variable that contains string. $phpString

PHP file

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

^{Don't forget to escape $phpString before echoing it.}

In your Vue define a property called myProperty:

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

<script>
export default {
  props: ['myProperty']
}
</script>

answered Jan 5, 2019 at 4:56

Orkhan Alikhanov

10.2k4 gold badges50 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Salvo Rub · Accepted Answer · 2020-02-19 15:01:56Z

2

My intention is to transfer data from my .php file to the .js file where the VUE code resides. Here I show you my code. In the proposed example I would like to import a simple string, subsequently I would like to import a JSON. Thank you so much. File PHP

<div id='app'> <App v-bind:import='Value Import'> C'è QUALCHE PROBLEMA </App> </div>"

File .js

var App = Vue.component("App", {
    template: `
      <div class="container">
        <div>
          <h2>{{ titolo }}</h2>
          <h3>{{ import }}</h3>

        </div>
      </div>
    `,
    props: ['import'],

    data() {
      return {
        color: "color: red",
        titolo: "Inizio Container",
      };
    }
  });

  new Vue({
    el: "#app",
  });

Quanto sopra purtroppo non funziona.

edited Feb 19, 2020 at 15:01

answered Feb 19, 2020 at 14:01

Salvo Rub

296 bronze badges

Comments

Sombriks · Accepted Answer · 2019-01-05 04:20:57Z

0

Vue single file components are processed on client side.

There are SSR, however, since you have php on your server, you must set up a REST service so you can use fetch or axios to consume server data and present it to the client side.

answered Jan 5, 2019 at 4:20

Sombriks

3,6804 gold badges43 silver badges60 bronze badges

1 Comment

Adam Robertson Over a year ago

Thanks. What if I were to just include what I needed in a hidden input and then fetch it from that?

Collectives™ on Stack Overflow

Passing data from PHP/HTML to .vue Component

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related