2017年12月7日 星期四

laravel + vue ( webpack , laravel-mix)

在 laravel 中,  如果要透過 webpack 來使用 vue ,  php 要傳資料給 vue 的方式和傳統方式上不太一樣.

可以參考這篇文章, 我一開始到處亂查資料都沒找對方向, 一直到看了這篇後, 才解決了問題.

vue 的檔案裡不像 blade 檔案會經過 laravel 處理, 所以不能直接放 php 的變數在 vue 檔案裡.  要將變數放在 blade 裡的 vue component 裡, 然後 vue 以 props 的方式取得變數內容.

假設 php 有個 route 要給 vue 以 ajax 使用

blade file
<sysconfigtab ajaxurl="{{ URL::to('/some_url') }}"></sysconfigtab>

vue file

export default{
  data(){
    return {}
  },
  props: ['ajaxurl'],
  mounted(){
    axios.get( this.ajaxurl ).then(function (response) {
    }
  },
}

解決這個問題後, 後續開始學 vue 才算慢慢有了進展.