使用Vue.js的Laravel 5.7

Question

我用webpack創建了一個新的Laravel 5.7項目。 現在，使用Webpack編譯文件后，VueJs無法正常工作，這意味着不顯示要檢查的組件，甚至v-model也無法正常工作。 我用過vuejs CDN，也安裝了一個，但仍然無法正常工作。

未編譯的JS文件：

 import Vue from 'vue'; new Vue({ el: '#addProduct_', data: { netKg: 0, grossKg: 0, taric_hs: 'taric', hs_par: 'hs par', }, methods: { getHsPer:function(){ alert(123); if(this.taric_hs.length == 10) { console.log(123); axios.get('/products/getHsPercentage/'+this.taric_hs) .then(response =>[ this.hs_per = response.data.hs_percentage ]) } }, }, computed: { minGrossKg(){ return this.netKg; }, }, mounted() {}, }); Vue.config.devtools = true; 

刀片文件：

 <div class="container" id="addProduct_"> <div class="card-body"> <form method="post" role="form" action="/products"> @csrf <div class="form-row"> <div class="form-group col-md-3"> <label for="taricHs">TARIC HS</label> <input type="text" class="form-control" id="taricHs" name="taricHs" placeholder="TARIC HS" minlength="10" maxlength="10" v-model="taric_hs" @click="getHsPer()" required> </div> <div class="form-group col-md-3"> <label for="hsPer">Duty Percentage</label> <input type="number" class="form-control" id="hsPer" name="hsPer" placeholder="HS Percentage" v-model="hs_par" readonly> </div> </div> <button type="submit" class="btn btn-primary">Save</button> </form> </div> </div> <script src="{{ asset('js/addProduct.js') }}"></script> 

如果我使用VueJs CDN鏈接：“ vue-devtool”顯示項目處於產品模式，控制台顯示項目處於開發模式，並且在Vue選項卡中仍未顯示根組件，並且VueJs也仍然無法正常工作。 圖片鏈接如下。 瀏覽器屏幕截圖

Answer 1

如果還沒有，請重新啟動瀏覽器。