时间戳

首页 > 解决方案 > 将数据从 laravel 传递到刀片视图中的组件

javascript - 将数据从 laravel 传递到刀片视图中的组件

问题描述

我创建了一个 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>

我有一个错误，说属性或方法方法未在实例上定义，但在 render 期间引用。

我试过这个，但它仍然不起作用

<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' }
      ]
    }
  }
    }
}

标签： javascriptlaravelvue.jsvuejs2

解决方案

  1. 永远不要this在模板中使用
  2. 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>

推荐阅读