Question

我的password_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>

在我的bootstrap.js文件中，我已经

了

import './interceptors.js';
import './forms/form.js';
import './forms/errors.js';

import PasswordReset from './settings/password_reset.vue'

new Vue({
    el: 'body',
    components: {
        PasswordReset
    },
    ready() {

    }
});

并在app.js文件中我

import './bootstrap.js'

HTML：

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

但似乎组件没有显示出来。我尝试在准备好的方法中警告一个消息，它工作正常。我也加载了Vue.js。

Vuejs组件未显示

0 个答案: