[Vuejs]-Transfer data from PHP to Vue

by

0👍

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='app'> 
</div>
</body>
<script>
var App = Vue.component("App", {
    data() {
      return {
        color: "color: red",
        titolo: "Inizio Container",
      };
    },
    props: ['importProps'],
    template: `
      <div class="container">
        <div>
          <h2>{{ titolo }}</h2>
          <h3>{{ importProps }}</h3>
        </div>
      </div>
    `
  });

  new Vue({
    el: "#app",
    components : {
        App
    },
    template : "<App importProps='Value Import'></App>"
  });

</script>
</html>

0👍

I TELL YOU THAT I REALLY HAVE A LOT OF CONFUSION. AFTER YOUR COUNCIL I CARRIED OUT TESTS. HERE ARE THE VARIOUS ISSUES FOUND.

-1- FIRST THING ON PROPS IF I WRITE ‘importProps’ I GOT ERROR, MODIFYING IT IN “import_props” RESOLVED.

-2- file.php

<div id='app'> <App import_props ='Value Import'> C'è QUALCHE PROBLEMA </App> </div>

file.js

var App = Vue.component("App", {
    template: `
      <div class="container">
        <div>
          <h2>{{ titolo }}</h2>
          <h3>{{ import_props }}</h3>
        </div>
      </div>
    `,
      mounted () { 
        console.log("MONTED  " ,this.import_props)
    },
    props: ['import_props'],
    data() {
      return {
        import: "Importtt ",
        color: "color: red",
        titolo: "Inizio Container Test",
      };
    }
  });

AS ABOVE, IT WORKS CORRECTLY, but if I replace the string with an object (JSON), then it doesn’t work anymore. To make it work I have to insert in v-bind. Can you tell me the reasons for these behaviors. Thanks a lot and sorry for the questions, maybe stupid.

 <div id='app'> <App :import_props='$productJS' > <h1> C'è QUALCHE PROBLEMA </h1></App> </div>"

Leave a comment