iT邦幫忙

0

Laravel的Blade未接收到Vue的Data

  • 分享至 

  • xImage

在Laravel8裝了Vue3,但Laravel的Blade始終抓不到Vue的Data,請問邦友們,還有什麼細節是未注意到的嗎?

package.json

"devDependencies": {
    "vue-loader": "^16.8.3"
},
"dependencies": {
    "vue": "^3.2.37",
    "vue-router": "^4.0.16"
},

resources/js/vue.js

window.Vue=require('vue');

webpack.mix.js

mix.js('resources/js/vue.js','public/js');

show.blade.php

<head>
    <script src="js/vue.js"></script>
</head>
<body>
    <span id="msg">
        @{{ message }}
    </span>
    <script>
        new Vue({
            el: '#msg',
            data: {
                message: 'Lorem ipsum dolor sit amet consectetur.',
            }
        });    
    </script>
</body>

routes/web.php

Route::get('/vue', function (){
    return view('show');
});

畫面輸出的結果

{{ message }}
看更多先前的討論...收起先前的討論...
cloudeasy iT邦新手 5 級 ‧ 2022-06-20 14:21:58 檢舉
打開一下開發人員工具,看看 new Vue 有沒有報錯
tpdnxu iT邦新手 5 級 ‧ 2022-06-20 16:12:10 檢舉
F12有報Vue is not defined,於是補了一句const Vue=window.vue,現在換報Vue is not a constructor,找了些方法試還是會報not a constructor的錯誤
人家已經在提醒你了。
你的問題找錯方向了。
你得先學會怎麼掛好VUE上去。

關鍵字給你 「Laravel + VUE」
不要分開看。分開看你會看不懂。
我記得有Laravel+VUE的範例專案。你也可以先下載那些專案回來試試研究怎麼做。
Laravel + Vue, 你需要了解 Vue 的部份一樣是要執行 npm run dev 等等...
並不是你做完相對應的檔案就沒事了, 他只是前後端框架包含再後端框架的 Laravel
但是前端框架的 Vue 還是需要做另外的 build 處理喔!
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答