过帐表单空数据

对于我的NuxtJS应用程序,我有多个组件以一种形式组合在一起。代码如下:

AppButton。vue

<template>
  <button
    class="button"
    :class="btnStyle"
    :disabled="disabled"
    v-bind="$attrs"
    v-on="$listeners"><slot /></button>
</template>

<script>
export default {
  name: 'AppButton',
  props: {
    btnStyle: {
      type: String,
      default: ''
    },
    disabled: {
      type: String
    }
  }
}
</script>

应用程序输入。vue

<template>
  <div class="form-input">
    <input
      v-bind="$attrs"
      :name="name"
      :value="value"
      :type="type"
      :placeholder="placeholder"
      :max="max"
      :min="min"
      :pattern="pattern"
      :required="required"
      :disabled="disabled"
      @input="$emit('input', $event.target.value)">
  </div>
</template>

<script>
export default {
  name: 'AppFormInput',
  props: {
    controlType: {
      type: String,
      default: 'input'
    },
    name: {
      type: String
    },
    value: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    max: {
      type: String
    },
    min: {
      type: String
    },
    pattern: {
      type: String
    },
    required: {
      type: String,
    },
    disabled: {
      type: String
    }
  }
}
</script>

FormGroup。vue

<template lang="html">
  <div class="form-group">
    <AppLabel :label="label"/>
    <AppFormInput :v-bind="$attrs"/>
  </div>
</template>

<script>
import AppLabel from '~/components/atoms/AppLabel'
import AppFormInput from '~/components/atoms/AppFormInput'

export default {
  components: {
    AppLabel,
    AppFormInput
  },
  props: {
    label: {
      type: String,
      default: 'Form Label'
    }
  }
}
</script>

类型vue

<template lang="html">
  <form @submit.prevent="onSave">
    <FormGroup label="Form Input" v-model="formPosts.forminput"/>
    <FormGroup label="Form Input Disabled" disabled="disabled" v-model="formPosts.forminputdisabled"/>
    <FormGroup label="Form Input With Placeholder" placeholder="Set placeholder" v-model="formPosts.forminputplaceholder"/>
    <FormGroup label="Form Input Required" required="required" v-model="formPosts.forminputrequired"/>
    <FormGroup label="Form Email" type="email" v-model="formPosts.forminputemail"/>
    <FormGroup label="Form Date" type="date" v-model="formPosts.forminputdate"/>
    <FormGroup label="Form Number" type="number" value="1" min="1" max="5" v-model="formPosts.forminputnumber"/>
    <FormGroup label="Form Tel" type="tel" pattern="\d{3}-\d{3}-\d{4}" placeholder="XXX-XXXX-XXXX" v-model="formPosts.forminputtel"/>
    <!--Add Select normal and disabled-->
    <FormGroup label="Form Radio" type="radio" value="1" v-model="formPosts.forminputradio"/>
    <FormGroup label="Form Checkbox" type="checkbox" value="2" v-model="formPosts.forminputcheckbox"/>
    <AppButton type="submit" btn-style="btn-brand">Save</AppButton>
  </form>
</template>

<script>
import FormGroup from '~/components/molecules/FormGroup'
import AppButton from '~/components/atoms/AppButton'

export default {
  components: {
    FormGroup,
    AppButton
  },
  data() {
    return{
      formPosts: {
        forminput: '',
        forminputdisabled: '',
        forminputplaceholder: '',
        forminputrequired: '',
        forminputemail: '',
        forminputdate: '',
        forminputnumber: '',
        forminputtel: '',
        forminputradio: '',
        forminputcheckbox: '',
      }
    }
  },
  methods: {
    onSave() {
      console.log(this.formPosts);
      this.$emit('submit', this.formPosts)
    },
  }
}
</script>

至少 指数vue

<template lang="html">
  <div class="container">
    <h1>Forms</h1>
    <Form @submit="onSubmitted"/>
  </div>

</template>

<script>
import Form from '~/components/organism/Form'

  export default {
    components: {
      Form
    },
    methods: {
      onSubmitted(data){
        console.log(data);
      }
    }
  }
</script>

提交表单时,字段保持为空。例如,必填字段必须有一个值,但它保持为空。我认为有些组件无法通过字段的值访问。有人有小费吗?

谢谢你的帮助