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

Question

[Al Sm]

Здравствуйте. Помогите пожалуйста разобраться, никак не получается передать данные из 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 и вот уже несколько дней завис на этом :(
Всем откликнувшимся, большое спасибо!

Comments

[Igor Koch]

{{ json_encode($cat) }} Не пустой приходит?

[Al Sm]

Igor Koch, нет. Пробовал разные данные передавать вместо {{ json_encode($cat) }}, но ничего не передается.

[Igor Koch]

+ в шаблоне должен быть рут элемент

<template>
  <div>
    {{ cat }}
  </div>
</template>

[Al Sm]

Igor Koch, так тоже не работает.

[Al Sm]

Igor Koch, или я что то не правильно понял про рут элемент?

Answer 1

[Al Sm]

В общем после долгих мучений, удалось передать данные только следующим способом (не знаю на сколько это правильно, практично и минималистично, может кому нибудь поможет и будет полезно):

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>

Comments

[Al Sm]

atehnix, супер! Спасибо большое!

Answer 2

[Александр Аксентьев]

Зачем json encode и биндинг(:) по передаче простой строки?

Изврат какой-то.

Comments

[Al Sm]

А правильно сделать? По другому не получается никак.