v-model 在 laravel vuejs 中不工作
v-model not working in laravel vuejs
我在 Laravel 应用程序中使用 ElementUI,我面临的问题是 v-model 指令不起作用。我也试过正常输入,但 v-model 指令仍然不起作用。
export default {
props: ['cardHeading'],
data() {
return {
formData: {
name: 'asdf',
password: ''
},
csrfToken: window.Laravel.csrfToken
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
},
mounted() {
console.log(this.formData);
}
}
<el-form ref="form" label-position="right" :model="formData" label-width="100px">
<h1>{{cardHeading}}</h1>
<input type="hidden" name="_token" :value="csrfToken">
<el-form-item label="Email: ">
<el-input type="email" v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="Password: ">
<el-input type="password" suffix-icon="fa-icon-view" v-model="formData.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" round>Create<i class="el-icon-d-arrow-right"></i></el-button>
</el-form-item>
</el-form>
我不确定这是否是问题所在,但这绝对是一个问题。
在你的layouts/app.blade.php
你的加载app.js
两次。我建议删除第 15 行 head
中的那个:
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
我在 Laravel 应用程序中使用 ElementUI,我面临的问题是 v-model 指令不起作用。我也试过正常输入,但 v-model 指令仍然不起作用。
export default {
props: ['cardHeading'],
data() {
return {
formData: {
name: 'asdf',
password: ''
},
csrfToken: window.Laravel.csrfToken
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
},
mounted() {
console.log(this.formData);
}
}
<el-form ref="form" label-position="right" :model="formData" label-width="100px">
<h1>{{cardHeading}}</h1>
<input type="hidden" name="_token" :value="csrfToken">
<el-form-item label="Email: ">
<el-input type="email" v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="Password: ">
<el-input type="password" suffix-icon="fa-icon-view" v-model="formData.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" round>Create<i class="el-icon-d-arrow-right"></i></el-button>
</el-form-item>
</el-form>
我不确定这是否是问题所在,但这绝对是一个问题。
在你的layouts/app.blade.php
你的加载app.js
两次。我建议删除第 15 行 head
中的那个:
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>