如何抽象vee-validate错误属性？

Question

我目前有一个自定义组件，其父组件带有v-validate。我想将"fields.email && fields.email.touched ? errors.first('email') : ''"抽象为它自己的方法，最好是在mixin上。我尝试创建一个接受name并返回上述结果的方法，由于方法没有反应性，因此这似乎不起作用。我也尝试过创建一个计算属性，但似乎无法使它成为动态属性。可行的解决方案是动态创建计算的属性，但是：我相信这是不可能的。

这是我的代码：

InputField.vue：

<template>
  <label :for='name' :class="{error: error}">
    {{ label }}
    <input 
      class='input'
      :value="value"
      :disabled="disabled"
      :name="name" 
      :type="type"
      :placeholder="placeholder"
      @input="$emit('input', $event.target.value)" 
      @change="$emit('change', $event.target.value)" 
      @blur="$emit('blur')"
      />
    <p v-if="error">{{ error }}</p>
  </label>
</template>

<script>
export default {
  props: {
    label: String,
    name: String,
    type: String,
    value: [String, Number],
    placeholder: [String, Number],
    disabled: {
      type: Boolean,
      default: false
    },
    error: String
  }
};
</script>

LoginModal.vue

<template>
  <div class='login-modal-inner'>
    <div class='left-box form-wrapper'>
      <h3>Login</h3>
      <form @submit.prevent="submitForm('login')">
        <input-field 
          v-model.trim="login.email" 
          name='email' 
          label='Email' 
          type='email' 
          v-validate="'required|email'"
          :error="fields.email && fields.email.touched ? errors.first('email') : ''"
        />
        <input-field 
          v-model="login.password" 
          name='password' 
          label='Password' 
          type='password' 
          v-validate="'required'"
        />
        <app-button class='submit'>Log In</app-button>
      </form>
    </div>

   ...

  </div>
</template>

<script>
import InputField from "../UI/input/InputField.vue";
import Button from "../UI/input/Button.vue";
import InputValidationError from "../UI/input/Button.vue";

export default {
  data() {
    return {
      register: {
        email: "",
        password: "",
        confirmPassword: ""
      },
      login: {
        email: "",
        password: ""
      }
    };
  },
  methods: {
    submitForm(type) {
      this.submitClicked = true;
      this.$validator.validate();
      this.$emit(`${type}-submit`, this[type]);
    },
  },
  components: {
    InputField,
    appButton: Button
  }
};
</script>