Как передать массив из blade в vue?

Question

[arseniylebedev]

Передаю так:

<servers-component :serversList="{{ json_encode($servers) }}"></servers-component>

Если посмотреть через dev tools то передается serverslist="[object Object]"
И в самом компоненте props serversList undefined.

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

Comments

[Koteezy]

{!! json_encode($servers) !!}

[arseniylebedev]

Koteezy,
В чем может быть проблема?
Сделал так:
{!! json_encode($servers) !!}

[Koteezy]

arseniylebedev, Именно так?

<servers-component :serversList="{!! json_encode($servers) !!}"></servers-component>

[arseniylebedev]

Koteezy, Да. $servers это simplePaginate объект, может просто data из simplePaginate передавать в vue?

[Koteezy]

arseniylebedev, Нет, так не должно быть, в любом случае

[Koteezy]

arseniylebedev, Попробуйте просто кастомный метод, типа:
{{ test($data) }}

function test ($a) {
    return json_encode($a);
}

У меня просто разные результаты, если с методом, и без

[arseniylebedev]

Koteezy,

<?php
 function test($d) {
       return json_encode($d);
 }
?>

<div id="servers">
       <servers-component :serversList="{!! test($servers) !!}"></servers-component>
</div>

<div data-v-c34ba6f0="" class="servers" serverslist="[object Object]"><h1 data-v-c34ba6f0="">Servers</h1></div>

Теперь $servers передаю в blade без simplePaginate.

[arseniylebedev]

Проблема еще видно в чем-то другом не только blade. Передал просто строку в props, в mounted вызывается console.log(this); и serversList тоже undefined

[Koteezy]

arseniylebedev, а как пропсы заданы? такими же названиями? serversList? Вы просто при передаче в компонент другое название используете

[arseniylebedev]

<template>
    <div class="servers">
        <h1>Servers</h1>
    </div>
</template>

<script>
    export default {
        name: "servers-component",
        props: [
            'servers',
        ],
        data() {
            return {

            };
        },

        mounted() {
            console.log(this);
        }
    }
</script>

<style scoped>

</style>

Код компонента.

[arseniylebedev]

Если имя props поменять с serversList на servers, То данные передаются))

[arseniylebedev]

Koteezy, Добавил ответ как работает

Answer 1

[arseniylebedev]

<?php $sjson = json_encode($servers); ?>
 <servers-component :servers="{{ $sjson }}"></servers-component>

Вот так работает. Если использовать {!! !!} то не работает, вылазит весь текст объекта на страницу еще и наполовину обрезанный.

Понял еще почему не передавались данные в props с названием serversList. В html нельзя так атрибуты называть, правильно будет servers-list

Comments

[Koteezy]

Отлично, а так же, если задать пропс в компоненте serversList и передать его как servers-list, то, работать так же будет )