[英]Laravel 5.5 render a React component in a blade view with data from the controller
[英]Pass data from laravel to a component in blade view
我創建了一個PasswordFields.vue文件。
<template>
<div>
<el-form-item label="Mot de passe"
prop="password"
:error="this.registerForm.errors.get('password')"
required
:rules="[{ 'min': 6, message: 'Le mot de passe doit faire au moins 6 caractères', trigger: ['blur', 'change'] }]">
<el-input type="password" name="password" id="password" v-model="this.registerForm.password">
</el-input>
</el-form-item>
<!-- confirm password -->
<el-form-item label="Confirmation du mot de passe"
prop="password_confirmation"
:error="this.registerForm.errors.get('password_confirmation')"
required
:rules="[{ 'min': 6, message: 'Le mot de passe doit faire au moins 6 caractères', trigger: ['blur', 'change'] }]">
<el-input type="password" name="password_confirmation" id="password_confirmation" v-model="this.registerForm.password_confirmation">
</el-input>
</el-form-item>
</div>
</template>
每當我在Blade視圖中調用組件時,如下所示:
<password-fields></password-fields>
我有一個錯誤,指出屬性或方法方法未在實例上定義,但在渲染期間被引用 。
我試過了,但是還是不行
<password-fields registerForm="registerForm"></password-fields>
你能幫助我嗎 ? 如何將值傳遞給我的組件? 非常感謝你
編輯(我組件的結尾)
<script>
export default {
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password'));
} else {
if (this.registerForm.password_confirmation !== '') {
this.$refs.registerForm.validateField('password_confirmation');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password again'));
} else if (value !== this.registerForm.password) {
callback(new Error('Two inputs don\'t match!'));
} else {
callback();
}
};
return {
rulesPass: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
]
}
}
}
}
this
props
示例組件:
<template>
<div>
<el-form-item label="Mot de passe"
prop="password"
:error="registerForm.errors.get('password')"
required
:rules="[{ 'min': 6, message: 'Le mot de passe doit faire au moins 6 caractères', trigger: ['blur', 'change'] }]">
<el-input type="password" name="password" id="password" v-model="registerForm.password">
</el-input>
</el-form-item>
<!-- confirm password -->
<el-form-item label="Confirmation du mot de passe"
prop="password_confirmation"
:error="registerForm.errors.get('password_confirmation')"
required
:rules="[{ 'min': 6, message: 'Le mot de passe doit faire au moins 6 caractères', trigger: ['blur', 'change'] }]">
<el-input type="password" name="password_confirmation" id="password_confirmation" v-model="registerForm.password_confirmation">
</el-input>
</el-form-item>
</div>
</template>
<script>
export default {
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password'));
} else {
if (this.registerForm.password_confirmation !== '') {
this.$refs.registerForm.validateField('password_confirmation');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password again'));
} else if (value !== this.registerForm.password) {
callback(new Error('Two inputs don\'t match!'));
} else {
callback();
}
};
return {
rulesPass: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
]
}
}
}
}
props: ['registerForm'],
}
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.