Vue Elform动态验证

Question

<template>
  <div>
    <el-form label-position="top" :model="notificationEmails" ref="emailForm">
      <el-form-item
        v-for="(item, index) in notificationEmails.emails"
        :key="index"
        :label="getLabel(index)"
        :for="`${item.id}_${index}`"
        :prop="'emails.' + index + '.id'"
        :rules="{
          required: true,
          type: 'email',
          message: 'Not valid email',
          trigger: ['blur', 'change']
        }"
      >
        <el-row>
          <el-col :span="6">
            <el-input v-model="item.id" type="email" :id="`${item.id}_${index}`" />
          </el-col>
          <el-col :span="2" style="padding-left: 18px">
            <span v-if="index === 0" tabindex="0" @click="addEmail" @keyup.enter.stop="addEmail">
              <i aria-hidden="true" class="icon-add-circle-outline" />
              <span class="screen-reader">{{$t('a11y.settings.soldTo.notif.action.addEmail')}}</span>
            </span>
            <span
              v-else
              tabindex="0"
              @click="deleteEmail(item.id)"
              @keyup.enter.stop="deleteEmail(item.id)"
            >
              <i class="icon-subtract-circle-outline" aria-hidden="true" />
              <span class="screen-reader">{{$t('a11y.settings.soldTo.notif.action.deleteEmail')}}</span>
            </span>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'EmailWidget',
  data() {
    return {
      notificationEmails: {
        emails: []
      }
    };
  },
  props: ['passEmail'],
  watch: {
    passEmail: {
      handler(newVal) {
        this.notificationEmails.emails = newVal;
      },
      deep: true
    },
    notificationEmails: {
      handler() {
        this.$refs.emailForm.validate(async validate => {
          if (validate) {
            await this.$store.dispatch('settings/GENERIC', {
              module: 'common',
              propKey: 'validEmail',
              propValue: true
            });
          } else {
            await this.$store.dispatch('settings/GENERIC', {
              module: 'common',
              propKey: 'validEmail',
              propValue: false
            });
          }
        });
      },
      deep: true
    }
  },
  methods: {
    addEmail() {
      this.notificationEmails.emails.push({
        id: '',
        priority: this.notificationEmails.emails.length + 1
      });
      // this.emails = [...this.emails, { id: '', priority: this.emails.length + 1 }];
    },
    deleteEmail(email) {
      // this.emails = this.emails.filter(item => item.id !== email);
      let index = 0;
      for (let i = 0; i < this.notificationEmails.emails.length; i += 1) {
        if (this.notificationEmails.emails[i].id === email) {
          index = i;
          break;
        }
      }
      this.notificationEmails.emails.splice(index, 1);
    },
    getLabel(index) {
      return index === 0 ? this.$t('settings.soldTo.notif.email') : '';
    }
  },
};
</script>

<style lang="scss">
i:hover {
  cursor: pointer;
}
</style>

关于以动态形式添加或删除Vue电子邮件的验证中的一些问题。当我添加新电子邮件时，验证无法工作。当我删除电子邮件时。它显示

  

错误：请将有效的prop路径转移到表单项！

编辑电子邮件没有问题。

我根据官方文档中的输入代码更改了道具，但仍然显示错误。