从 PHP 获取动态数据到 Vue.js答案

【问题标题】：Get dynamic data from PHP to Vue.js从 PHP 获取动态数据到 Vue.js
【发布时间】：2019-05-08 00:39:05
【问题描述】：

我正在使用 PHP(CodeIgniter) 来渲染一个使用 vue cli 构建的页面。

通常，如果我想将值从 php 传递到 javascript，我会这样做：

var page = '<?php echo $page ?>';

但是由于页面是用 vue 构建的，并且所有的 js 都被缩小了，所以这是不可能的。我需要一个替代解决方案来获取从 php 发送的 vue 中的变量。

【问题讨论】：

从组件调用API并填充数据。
@DevsiOdedra 我不能。要调用 API，我需要知道呈现为 page/id 的页面的 id

标签： javascript php codeigniter vue.js

【解决方案1】：

试试这个：这里的 js 变量 msg2 打印 php 变量 $test value= "Chris"

<html>
   <head>
      <title>Example</title>
      <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
         <h1>{{ message }}</h1>
         <p>{{ msg2 }}</p>
        <?php
        $test = "Chris";
        ?>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {

               message: 'My first VueJS Task',
               msg2: "<?php echo $test ?>"
            }
         });
      </script>
   </body>
</html>

【讨论】：

【解决方案2】：

你应该放弃将var page = '<?php echo $page ?>'; 传递给 JS 的想法。

1.检查您的路线 - 我假设您仍然有包含逻辑的 PHP 页面，并且 Vue 位于单独的控制器上。

$route['default_controller'] = 'Home'; 

// Create a new controller with the name Vue before adding the routes.
$route['vue'] = 'Vue'; // default page
$route['vue/(:any)'] = 'Vue/$1'; // vue/with-any-passing/value/you/want

2。控制器：Vue.php

<?php
class Vue extends CI_Controller {

        public function index( $uri_for_vue = '' )
        {
          $vueSetup = array(
             'settings' => array(
                'vueURL'=> $uri_for_vue
             )
          );

          $this->load->view('vueView', $vueSetup);

        }
}

3.查看：vueView.php

<html>
   <head>
      <title>vue page</title>
      <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
         <h1>{{ message }}</h1>
         <p>{{ msg2 }}</p>
        <?php
        $test = "Chris";
        ?>
      </div>
      <script id='vue-elem' data-vue='<?php echo json_encode($settings)?>' type = "text/javascript"></script>
      <script type = "text/javascript">

         var vueElem = document.getElementById('vue-elem');
         var vueSettings = JSON.parse(vueElem.getAttribute("data-vue"));

         // you may want to remove the element from html after it's contents is loaded in js, or reset the 
         // vueElem .setAttribute("data-vue", "{}"); 

         // you will want to add this line in the minified version so vue can self-load    
         var page = vueSettings.vueURL; 
         console.log('page url', page );

         // now you can load vue

      </script>
   </body>
</html>

【讨论】：