Получите динамические данные из PHP в Vue.js - PullRequest
Новая
       3

Получите динамические данные из PHP в Vue.js

0 голосов
/ 06 декабря 2018

Я использую PHP (CodeIgniter) для рендеринга страницы, созданной с помощью vue cli.

Обычно, если я хочу передать значение из php в javascript, я бы сделал что-то вроде этого: 

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

Но так как страница построена с использованием vue и все js минимизированы, и все это невозможно.Мне нужно альтернативное решение, чтобы получить переменную в VUE, которая отправляется с php.

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

Вам следует отказаться от идеи передачи 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>
0 голосов
/ 06 декабря 2018

Попробуйте: здесь переменная 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...