将多个Nuxt验证文本字段组件作为道具

<template>
  <div>
    <validation-field v-for="(field, index) in fields" :key="index" :field="field"></validation-field>
    <button @click="validateFields">验证字段</button>
  </div>
</template>

<script>
import ValidationField from '~/components/ValidationField.vue'

export default {
  components: {
    ValidationField
  },
  data() {
    return {
      fields: [
        { label: '字段1', value: '', required: true },
        { label: '字段2', value: '', required: false },
        { label: '字段3', value: '', required: true }
      ]
    }
  },
  methods: {
    validateFields() {
      // 遍历验证文本字段组件，进行验证操作
      this.fields.forEach(field => {
        // 执行验证逻辑
        if (field.required && field.value === '') {
          console.log(`${field.label}不能为空`)
        }
      })
    }
  }
}
</script>