使用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

如果还没有，请重新启动浏览器。