Vue js在我的laravel中不起作用
我正在遵循教程表单,在执行Vue js在我的laravel中不起作用,laravel,vue.js,vuejs2,bulma,buefy,Laravel,Vue.js,Vuejs2,Bulma,Buefy,我正在遵循教程表单,在执行Vue命令时迷路了 不要在我的代码上工作。我运行npm-run-dev和npm-run-watch生成错误,但似乎我的代码完全正常,然后我在浏览器上查看developer工具,然后从根目录下弹出错误 错误消息是: [Vue warn]:属性或方法“password\u options”未在实例上定义,但在渲染期间被引用。通过初始化属性,确保此属性在数据选项中或对于基于类的组件是被动的。请参阅: 以下是分类: warn @
Vue命令时迷路了
不要在我的代码上工作。我运行npm-run-dev
和npm-run-watch
生成错误,但似乎我的代码完全正常,然后我在浏览器上查看developer工具
,然后从根目录下弹出错误
错误消息是:
[Vue warn]:属性或方法“password\u options”未在实例上定义,但在渲染期间被引用。通过初始化属性,确保此属性在数据选项中或对于基于类的组件是被动的。请参阅:
以下是分类:
warn @ app.js:sourcemap:32590
warnNonPresent @ app.js:sourcemap:33896
has @ app.js:sourcemap:33929
(anonymous) @ VM8162:2
Vue._render @ app.js:sourcemap:36541
updateComponent @ app.js:sourcemap:34785
get @ app.js:sourcemap:35139
Watcher @ app.js:sourcemap:35128
mountComponent @ app.js:sourcemap:34792
Vue.$mount @ app.js:sourcemap:40537
Vue.$mount @ app.js:sourcemap:42936
Vue._init @ app.js:sourcemap:36637
Vue @ app.js:sourcemap:36726
(anonymous) @ app.js:sourcemap:988
__webpack_require__ @ app.js:sourcemap:20
Object.defineProperty.value @ app.js:sourcemap:969
__webpack_require__ @ app.js:sourcemap:20
(anonymous) @ app.js:sourcemap:63
(anonymous) @ app.js:sourcemap:66
开发工具vue错误:
[Vue warn]: Error compiling template:
<div class="management-area" id="app" style="position: absolute;top: 4rem;left: 200px;right: 0;">
<div class="flex-container">
<div class="columns m-t-10">
<div class="column">
<h1 class="title">Edit User</h1>
</div>
</div>
<div class="columns">
<div class="column">
<h1 class="m-t-0"></h1>
<form action="http://localhost/cnb/public/manage/users/3" method="POST">
<input type="hidden" name="_method" value="PUT">
<input type="hidden" name="_token" value="poLNMotZhSoaEG7NH4WJZPoQKTAsGGy47462aM9J">
<div class="field">
<label for="name" class="label">Name</label>
<p class="control">
<input type="text" class="input" name="name" id="name" value="User">
</p>
</div>
<div class="field">
<label for="email" class="label">Email</label>
<p class="control">
<input type="email" class="input" name="email" id="email" value="user@app.com">
</p>
</div>
<div class="field">
<label for="password" class="label">Password</label>
<b-radio-grou>
<div class="field" v-model="password_options">
<b-radio value="keep">Do Not Change Password</b-radio>
</div>
<div class="field">
<b-radio value="auto">Auto-Generate New Password</b-radio>
</div>
<div class="field">
<b-radio value="manual">Manually Set New Password</b-radio>
<p class="control">
<input type="text" class="input" name="password" id="password" v-if="password_options == 'manual'" placeholder="Manually give a password to this user" required="">
</p>
</div>
</b-radio-grou>
</div>
<button class="button is-primary">Edit User</button>
</form>
</div>
</div>
</div>
</div>
- <div v-model="password_options">: v-model is not supported on this element type. If you are working with contenteditable, it's recommended to wrap a library dedicated for that purpose inside a custom component.
您将模型绑定到一个div,该div仅适用于输入,如果您只想显示或隐藏该div,请将v-model更改为v-if
<div class="management-area" id="app" style="position: absolute;top: 4rem;left: 200px;right: 0;">
<div class="flex-container">
<div class="columns m-t-10">
<div class="column">
<h1 class="title">Edit User</h1>
</div>
</div>
<div class="columns">
<div class="column">
<h1 class="m-t-0"></h1>
<form action="{{route('users.update', $user->id)}}" method="POST">
{{method_field('PUT')}}
{{csrf_field()}}
<div class="field">
<label for="name" class="label">Name</label>
<p class="control">
<input type="text" class="input" name="name" id="name" value="{{$user->name}}">
</p>
</div>
<div class="field">
<label for="email" class="label">Email</label>
<p class="control">
<input type="email" class="input" name="email" id="email" value="{{$user->email}}">
</p>
</div>
<div class="field">
<label for="password" class="label">Password</label>
<b-form-checkbox-group v-model="password_options">
<div class="field">
<b-form-checkbox value="keep">Do Not Change Password</b-form-checkbox>
</div>
<div class="field">
<b-form-checkbox value="auto">Auto-Generate New Password</b-form-checkbox>
</div>
<div class="field">
<b-form-checkbox value="manual">Manually Set New Password</b-form-checkbox>
<p class="control">
<input type="text" class="input" name="password" id="password" v-if="password_options == 'manual'" placeholder="Manually give a password to this user" required>
</p>
</div>
</b-radio-group>
</div>
<button class="button is-primary">Edit User</button>
</form>
</div>
</div>
编辑用户
{{method_字段('PUT')}
{{csrf_field()}}
名称
电子邮件
密码
不要更改密码
自动生成新密码
手动设置新密码
编辑用户
您是否查看了错误消息中的给定链接?什么不清楚?当我刷新浏览器时,密码选项下的数据显示为a(ms),然后它就消失了。你能下载并告诉我正在设置的数据吗?我编辑了我的问题请查看根错误v模型用于输入,将v-model更改为v-if对不起,我的错误我已经更改为,但我仍然无法工作
<div class="management-area" id="app" style="position: absolute;top: 4rem;left: 200px;right: 0;">
<div class="flex-container">
<div class="columns m-t-10">
<div class="column">
<h1 class="title">Edit User</h1>
</div>
</div>
<div class="columns">
<div class="column">
<h1 class="m-t-0"></h1>
<form action="{{route('users.update', $user->id)}}" method="POST">
{{method_field('PUT')}}
{{csrf_field()}}
<div class="field">
<label for="name" class="label">Name</label>
<p class="control">
<input type="text" class="input" name="name" id="name" value="{{$user->name}}">
</p>
</div>
<div class="field">
<label for="email" class="label">Email</label>
<p class="control">
<input type="email" class="input" name="email" id="email" value="{{$user->email}}">
</p>
</div>
<div class="field">
<label for="password" class="label">Password</label>
<b-form-checkbox-group v-model="password_options">
<div class="field">
<b-form-checkbox value="keep">Do Not Change Password</b-form-checkbox>
</div>
<div class="field">
<b-form-checkbox value="auto">Auto-Generate New Password</b-form-checkbox>
</div>
<div class="field">
<b-form-checkbox value="manual">Manually Set New Password</b-form-checkbox>
<p class="control">
<input type="text" class="input" name="password" id="password" v-if="password_options == 'manual'" placeholder="Manually give a password to this user" required>
</p>
</div>
</b-radio-group>
</div>
<button class="button is-primary">Edit User</button>
</form>
</div>
</div>