it-swarm.com.ru

Проходить PHP массив на компонент Vue с использованием реквизита

  • Создание приложения Laravel с несколькими компонентами Vue
  • Хотите передать массив PHP в компонент Vue с помощью реквизита

Вот пример такого массива PHP:

["Foo" => 100, "Bar" => 50]

Отлично. Вот моя попытка передать их на компонент Chart:

<Chart points="{!! json_encode($points) !!}"></Chart>

Это выглядит хорошо, но строки (Foo и Bar) внутри массива $points инкапсулируются с "(двойные кавычки) при использовании json_encode(). Это означает, что всякий раз, когда первая строка появляется в массиве, браузер думает, что" предназначен для закрытия атрибут points.

Вот что вы можете увидеть в браузере:

<Chart points="{">Foo":100,"Bar":50}"</Chart>

Как мне это сделать? Я боролся с этим в течение многих часов, и я не могу обернуть голову вокруг этого.

  • Невозможно использовать "(двойные кавычки), так как браузер интерпретирует его как закрывающую кавычку для атрибута и портит HTML
  • Не могу использовать '(одинарные кавычки), так как это недопустимый JSON (а json_encode не поддерживает его)
5
weakdan
<Chart points='{!! json_encode($points) !!}'></Chart>

Просто используйте единственные кавычки.

4
Igor Q.

Хотя чтение предыдущих ответов заняло у меня некоторое время, чтобы начать работать. Итак, вот что работает для меня с Laravel 5.5 и VueJs 2.5:

  1. Преобразуйте ваш массив PHP в сериализованную строку JSON. 

    Для PHP массивов см. json_encode .
    Для коллекций Eloquent см. Метод Eloquent toJson .
    Для дальнейшего использования мы называем эту новую строку JSON $arrayAsJSON.

  2. На ваш взгляд (или шаблон Blade):

    <some-vue-component :componentProperty="{{ $arrayAsJSON }}"></some-vue-component>
    
  3. Компонент Vue:

    <template></template>
    
    <script>
      export default {
    
        props: ['componentProperty'],
    
        mounted() {
            console.log('some-vue-component mounted.');
            console.log(this.componentProperty)
        },
      }
    </script>
    
2
Didi

Можно использовать формальным способом:

<Chart points='<?php echo json_encode($points); ?>'></Chart>
1
Mohsen

Начиная с Laravel 5.5 вы можете использовать директиву @json.

<Chart [email protected]($points)></Chart>

1
godbout