Как правильно наследовать данные из Laravel во VueJS компонент?

Здравствуйте. Помогите пожалуйста разобраться, никак не получается передать данные из Laravel во Vue компонент.

Во вьюху show.blade.php отправляется переменная $cat со значением 'news':
@include('articles::show', ['cat' => 'news'])

Во вьюхе show.blade.php передаем эту переменную в компонент Vue:
<div id="app">
    <article :cat="{{ json_encode($cat) }}"></article>
</div>
<script src="{{asset('js/app.js')}}"></script>


В компоненте Article.vue пытаюсь получить передаваемые данные:
<template>
    <div>
        {{ cat }}
    </div>
</template>

<script>
export default {
    props: ['cat']
    }
</script>


Но ничего не выходит. Ошибок в консоле нет.
Подскажите пожалуйста, что я делаю не так? Только начинаю разбираться с Vue и вот уже несколько дней завис на этом :(
Всем откликнувшимся, большое спасибо!
  • Вопрос задан
  • 499 просмотров
Решения вопроса 1
radio_mus
@radio_mus Автор вопроса
В общем после долгих мучений, удалось передать данные только следующим способом (не знаю на сколько это правильно, практично и минималистично, может кому нибудь поможет и будет полезно):

snow.blade.php
<script>
    window.Laravel = @php echo json_encode(['cat' => $cat]); @endphp
</script>


Article.vue
<script>
export default {
        data(){
            return{
                type: window.Laravel.type
            }
        }
    }
</script>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Sanasol
@Sanasol Куратор тега Laravel
нельзя просто так взять и загуглить ошибку
Зачем json encode и биндинг(:) по передаче простой строки?

Изврат какой-то.
Ответ написан
Ваш ответ на вопрос

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

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