Laravel 未显示Vuejs组件_Laravel_Vue.js

Laravel 未显示Vuejs组件

laravel vue.js

Laravel 未显示Vuejs组件,laravel,vue.js,Laravel,Vue.js,我有一个密码\u reset.vue脚本，如下所示： <template> <form> <div class="alert alert-danger" v-if="form.errors.has('photo')"> @{{ form.errors.get('photo') }} </div> <div class="row"> &

我有一个

密码\u reset.vue

脚本，如下所示：

<template>
    <form>
        <div class="alert alert-danger" v-if="form.errors.has('photo')">
            @{{ form.errors.get('photo') }}
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="label">Current Password</div>
            </div>
            <div class="col-md-9">
                <div class="field--wrapper">
                    <label for="current_password">Current Password</label>
                    <input class="nom-fields" type="password"
                           v-model="form.current_password"
                           id="current_password" name="current_password"
                           placeholder="Current Password" value="">
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-md-3">
                <div class="label">Repeat Password</div>
            </div>
            <div class="col-md-9">
                <div class="field--wrapper">
                    <label for="password_repeat">Repeat Password</label>
                    <input class="nom-fields" type="password"
                           v-model="form.password_repeat"

        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-9 text-right">
                <button id="change_password"
                        class="blue-btn" v-on:click="update">
                    Change Password
                </button>
            </div>
        </div>
    </form>
</template>
<script>
    export default{
        data(){
            return{
                form: new MyForm({
                    current_password: '',
                    new_password: '',
                    password_repeat: '',
                    message: ''
                })
            };
        },

        methods: {
            /**
             * Update the user's password.
             */
            update(e) {
                e.preventDefault();

                this.form.startProcessing();

                this.$http.post('/account/change_password', this.form)
                        .then(function(response) {

                            this.form.finishProcessing();
                        })
                        .catch(function(response) {
                            this.form.setErrors(response.data);
                        });
            },
        }
    }
</script>

在

app.js

文件中，我：

import './bootstrap.js'

HTML:

<body>
     <password-reset></password-reset>
</body>

但似乎组件没有显示出来。我尝试在ready方法中提醒一个msg，它工作正常。我也在加载Vue.js

可能是因为您的html无效吗？你有一个结束atag@TremendusApps：不，当我在SO中添加问题时，这是myside的一个输入错误。您在浏览器中的Vue devtools中看到了什么？@ceejayoz:出于一些奇怪的原因，我无法在inspect元素中看到Vue devtool插件：/@user1012181 IMO中看到更严重的问题。应用程序的最终渲染JS是什么样子的？您的组件看起来是否正常运行？可能是因为您的html无效吗？你有一个结束atag@TremendusApps：不，当我在SO中添加问题时，这是myside的一个输入错误。您在浏览器中的Vue devtools中看到了什么？@ceejayoz:出于一些奇怪的原因，我无法在inspect元素中看到Vue devtool插件：/@user1012181 IMO中看到更严重的问题。应用程序的最终渲染JS是什么样子的？您的组件是否正常工作？

<body>
     <password-reset></password-reset>
</body>