将数据从 PHP 传输到 Vue答案

【问题标题】：Transfer data from PHP to Vue将数据从 PHP 传输到 Vue
【发布时间】：2020-06-03 21:58:24
【问题描述】：

我的目的是将数据从我的 .php 文件传输到 VUE 代码所在的 .js 文件。在这里，我向您展示我的代码。在建议的示例中，我想导入一个简单的字符串（随后我想导入一个 JSON），不幸的是，上述方法不起作用。我使用这种方法是因为我认为这是为 WP 创建短代码的最佳和最简单的方法。非常感谢。

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

文件.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",
  });

很遗憾，上述方法不起作用。

【问题讨论】：

怎么不工作了？您是否收到错误或结果不正确？

标签： javascript php vue.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

我告诉你，我真的很困惑。在你们的理事会之后，我进行了测试。这是发现的各种问题。

-1- 如果我写了“importProps”，那么关于道具的第一件事是我出错了，在“import_props”中修改它已解决。

-2-file.php

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

文件.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",
      };
    }
  });

如上所述，它工作正常，但如果我用对象 (JSON) 替换字符串，那么它就不再工作了。为了使它工作，我必须插入 v-bind。你能告诉我这些行为的原因吗？非常感谢，很抱歉这些问题，也许是愚蠢的。

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

【讨论】：