php - Vue.js 脚本在我的 heroku Laravel 应用程序中不起作用

Question

我正在尝试在 heroku 上部署一个 laravel 应用程序。除了所有的 vue.js 脚本，一切都很顺利。我已经有了 node js buildpack 并尝试在 heroku 上运行 npm run prod。我的 laravel 应用程序在我的本地运行良好。这是我从控制台得到的错误：https ://imgur.com/a/uqFC97y

这是我的网站：http ://dqrs.herokuapp.com/queues/create

如何复制错误：

1. 选择任何一个部门。预期结果：包含选项的下拉列表应出现在交易标签下方。

我将触发交易下拉菜单的按钮代码：

<div class=" btn-group-toggle col-sm-12 col-md-4 text-center mt-2">
                                                        <label @click="setDropdown('{{$department->name}}')" class="btn btn-default btn-lg w-100 text-uppercase" onclick="getdept({{$department}})">
                                                            <input type="radio" name="department" value="{{ $department->name}}" sr-only required> {{ $department->name}}
                                                        </label>
                                                    </div>

我的交易下拉代码：

<div class="col-sm-12 col-md-4 form-group{{ $errors->has('transaction') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-transaction">{{ __('Transaction') }}</label>
                                            <select class="form-control form-control-md" v-if="dropdown.length" v-model="selected" name="transaction" required>
                                            <option v-for="item in dropdown" :value="item">@{{ item }}</option>
                                            <option>Other</option>
                                            </select>
                                            @if ($errors->has('transaction'))
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $errors->first('transaction') }}</strong>
                                                </span>
                                            @endif
                                        </div>

我的 vue.js 脚本：

<script>
    const app = new Vue({
        el:'main',
        data:{
            dropdown: [],
            selected: null,
            trans:{

}

        },
        mounted(){
            this.getTrans();
            $('#confirmModal').modal({
        backdrop: 'static',
        keyboard: false
    });
        },
        methods:{
            getTrans(){
                axios.get('create/transactions')
                .then((response)=>{
                    this.trans=response.data
                })

                .catch(function (error){
                    console.log(error);
                });
            },
            setDropdown: function (type) {
                        this.selected = null;
                        this.dropdown = this.trans[type];
                        console.log(type)
                        },

                        isPrio(value) {
        document.getElementById('prio').value = value;
        $('#confirmModal').modal('hide');
    }

        }
    })
</script>

标签： phplaravelvue.jsheroku