带有 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 也仍然无法工作。图片链接如下。 browser screen shot

Answer 1

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