Vue 警告：未定义属性。表单输入绑定+条件渲染答案

【问题标题】：Vue warn: Property is not defined. Form input binding + conditional renderingVue 警告：未定义属性。表单输入绑定+条件渲染
【发布时间】：2018-03-02 00:21:05
【问题描述】：

我在输入绑定和条件渲染方面遇到了一些问题：例如如果我选择等级 = 1，我想显示日期字段。当我加载页面时，我得到：

[Vue 警告]：属性或方法“等级”未在实例上定义，但在渲染期间被引用。

我的表格：

<form id="school">
    <div class="form-group">
        {!! Form::label('grade', 'Grade') !!}
        {!! Form::select('grade', $grades, null, ['v-model' => 'grade']) !!}
    </div>

    <div class="form-group" v-show="grade == 1">
            {!! Form::label('date', 'Date') !!}
            {!! Form::date('date', null,) !!}
    </div>  
</form>

Vue 实例：

    <script src="/js/app.js"></script>
    <script>
        new Vue({
            el: '#school',
            data: {
                grade: 1
            }
        });
    </script>

我在这里缺少什么？我是 Vue 新手，真的很想了解更多！

编辑：

当我查看浏览器的源代码时，我发现v-model 属性已经消失。例如：当我写<input type="text" name="test" v-model="test">时，我看到<input type="text" name="test">

【问题讨论】：

{!! Form::label 那是什么类型的语法？我已经专业地做 Vue.js 一年多了，但以前从未见过。
@connexo laravelcollective.com/docs/master/html#labels
那么，显示 Vue 实际看到的 HTML 不是更有意义吗？
我看到当我渲染页面时， v-model 属性消失了……快把我逼疯了！即使我不使用 Form 外观并输入 <input type="text" v-model="test"> .. 它返回 <input type="text">
从警告信息中，我可以告诉你问题不在于v-model 属性，而是new Vue({...}) 代码中的data: 属性。它没有grade 字段。您在问题中发布的内容确实如此，这使我们相信正在发生其他事情（也许您正在使用其他 new Vue({...}) 代码，也许其他事情会删除 grade，谁知道...）。

标签： laravel-5 vue.js vuejs2

【解决方案1】：

找到答案here

所以 Laravel 自带了一个 Vue 实例..

【讨论】：

“所以 Laravel 附带了一个 Vue 实例” 那么在你的问题中这意味着什么？
app.js 已经包含一个 Vue 实例（开箱即用）