使用Vue.js的Laravel 5.7

Question

i have created a new Laravel 5.7 project with webpack. Now after compiling files with webpack VueJs is not working means not showing component to inspect and even v-model is not working. i have used vuejs CDN and also install one but still does not work.

un-compiled JS file:

 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; 

Blade File:

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

IF i use VueJs CDN link: "vue-devtool" show project is in product mode and console shows project is in development mode and still not showing root component in Vue tab and VueJs is also still not work. picture link below. browser screen shot

Answer 1

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