Question

我正在尝试为我的应用程序中的表单创建特定于页面的Vue实例，但我一直收到以下错误并且该消息未呈现：

_[Vue warn]: Property or method "message" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.(found in Root)_

我正在使用Laravel 5.4的默认app.js入口点，加载了一个自定义组件。

App.JS：

require('./bootstrap');

window.Vue = require('vue');

window.events = new Vue();
window.notify = function(message,type){
    window.events.$emit('notify',message,type);
};

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('notification', require('./components/Notification.vue'));

const app = new Vue({
   el: '#app'
});

特定页面的Vue Istance：

<script type="text/javascript">
        new Vue({
           el: '#createPlanForm',

            created: function(){
               console.log("Test");
            },
            data: {
               message: 'Test'
            }
        });
    </script>

表单的ID设置正确，我也可以看到Console Logged测试消息。

表格模板：

{{ Form::open(['id' => 'createPlanForm','route' => 'ops.plans.store','class' => 'form-horizontal']) }}

                <div class="form-group @if($errors->has("name")) has-error @endif">
                  <label for="name" class="col-sm-2 control-label">Name:</label>

                  <div class="col-sm-10">
                    {{ Form::text('name',null,['class' => 'form-control']) }}

                    @if($errors->has('name'))<span class="help-block">{{ $errors->first('name') }}</span> @endif
                  </div>
                </div>
            @{{ message }}
                <div class="form-group">
                    <button type="submit" class="btn btn-flat btn-block btn-default">Create Plan</button>
                </div>
            {{ Form::close() }}

Vue属性未在实例上定义，但在render上引用

0 个答案: