@semki096

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

Вот такой код. Как передать значение 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>
  • Вопрос задан
  • 1782 просмотра
Решения вопроса 3
maddog670
@maddog670
page_id: {{!! $page->id !!}}
OR
page_id: <?php echo $page->id; ?>
Ответ написан
@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 например, что очень медленно, также работа с дата атрибутам очень медленная.
Ответ написан
Комментировать
@Arik
Мне больше нравится такие решения:
<div id="app" data-page-id="<?= $page->id; ?>"></div>


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы