Как передать значение php переменной в Vuejs?

Question

[semki096]

Вот такой код. Как передать значение php переменной в Vuejs?

<?php
    $page_id = 9;
?>

<script>
    Vue.component('star-rating', VueStarRating.default);
    new Vue({
      el: '#app',
      methods: {
        setRating: function(rating){
          this.rating= rating;
            
          //отправляем рейтинг аяксом
          axios.post('/books/rating', {
                rating: 'rating',
                page_id: вот здесь надо передать значение из PHP-переменной $page_id,
              })
              .then(function (response) {
                console.log(response);
              })
              .catch(function (error) {
                console.log(error);
              });
            
        }
      },
      data: {
        rating: 0
      }
    });
</script>

Answer 1

[maddog670]

page_id: {{!! $page->id !!}}
OR
page_id: <?php echo $page->id; ?>

Comments

[semki096]

может ещё есть какие варианты, подожду немного.

[Igor Koch]

semki096, Как передать объект из php в js?

Answer 2

[grinat]

Сделай отдельный объект и туда складируй данные и их оттуда вызывай. Ну то есть:

<script>
var vueAppParams = {
    dynamicParams: {
	    page_id: <?=$page->id?>
	}
}
</script>
<script>
...
axios.post('/books/rating', {
                rating: 'rating',
                page_id: window['vueAppParams'].dynamicParams.page_id,
              })
              .then(function (response) {
                console.log(response);
              })
              .catch(function (error) {
                console.log(error);
              });
            
        }
...	
</script>

Прост если пойдешь по иному пути, как тут народ предлагает, то в случае решения от maddog670 ты не сможешь сделать бандл, в случае от Arik придется обращаться к свойства контейнера через врезку в beforemount например, что очень медленно, также работа с дата атрибутам очень медленная.

Answer 3

[Arman]

Мне больше нравится такие решения:

<div id="app" data-page-id="<?= $page->id; ?>"></div>

и html и js на выходе туповаты и зависимы, но так понять легче и поддерживать такой код.