LaravelからVue.jsコンポーネントへの配列の渡し方

Question

LaravelでVue-Chart.jsを使いたい

Laravelで個人的に作っていたアプリケーションでグラフを表示したいと思い、Chart.jsを使おうとして、様々なサイトを参考にコードを書いたところ、思った動作をしてくれませんでした。ですが、Vue.jsの知識がないので何が違うのかわかりませんでした。具体的にはLaravel側からどういう風にデータ（配列型）を渡したら良いのかわかりませんでした。
下記のコードから違う点と改善点を指摘していただけないでしょうか。

実装したコード

$content_task_time = array();
        //ここで$content_task_timeに数字を代入しています
        foreach ($content_task_db as $content_task_dbs) {
            $i = 0;
            array_push($content_task_time, strtotime($content_task_dbs->updated_at) - strtotime($content_task_dbs->created_at));
            $i =+ 1;
        }


        $times = json_encode($content_task_time);

        'times' => $times,

                    <div id="app">
                        <task-chart times="{{ $times }}">
                        </task-chart>
                    </div>

//サンプルコードなのでlabelsの値は適当になっています
<script>  
import { Bar } from 'vue-chartjs' 

export default {  
  extends: Bar,  
  data: () => ({  
    chartdata: {  
      labels: ['January', 'February'],  
      datasets: [  
        {  
          label: 'Data One',  
          backgroundColor: '#f87979',  
          data: {
            props: {
              times: Array
              }
          }
        }  
      ]  
    },  
    options: {  
      responsive: true,  
      maintainAspectRatio: false  
    }  
  }),  

  mounted () {  
    this.renderChart(this.chartdata, this.options)  
  }  
}  
</script>  

参考にしたサイト

https://qiita.com/kotarosz1/items/26c85663e7b9c634a617
https://qiita.com/maejima_f/items/96ee60bc9e71ed19c7cb

Answer 1

マニュアルのBladeテンプレート JSONのレンダにBladeテンプレートからPHPの配列をvueコンポーネントに渡すときの書き方がのっています。この通りやるのがいいと思います。

要点は、

• 渡したいデータはコントローラではjsonエンコードせず配列のままビューに渡します。
• その変数を使って以下のように@jsonプリミティブを使ってコンポーネントのpropに渡します。json文字列には「"」が含まれるので「'」で囲むのが大事なようです。

<example-component :some-prop='@json($array)'></example-component>

Comments

[Himajin_akisyou]

受け渡しの方は解決しました！
ありがとうございました。