Question

对我来说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>

AppFormInput.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>

Form.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>

至少， index.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>

提交表单时，字段保持为空。必填字段必须具有值，例如但它保持为空。我认为有些组件无法访问该字段的值。有人有提示吗？

Thanx任何帮助

Answer 1

$attrs (in v-bind="$attrs") will only bind attributes，不是道具（粗体是我的）：

vm.$attrs ：包含无法识别（和提取）为道具的父范围属性绑定（class和style除外）即可。当组件没有任何声明的道具时，它基本上包含所有父范围绑定（class和style除外），并且可以通过v-bind="$attrs"传递给内部组件 - 在创建高阶组件时很有用。

您需要自己在 FormGroup.vue 中设置道具。

在 FormGroup.vue 中，声明value道具，以便您可以在模板中使用：

<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'
    },
    value: {                  // added this
      type: String            // added this
    }                         // added this
  }
}
</script>

在 FormGroup.vue 中，将:value="value" @input="$emit('input', $event)"添加到模板中。

<template lang="html">
  <div class="form-group">
    <AppLabel :label="label"/>
    <AppFormInput :v-bind="$attrs" :value="value" @input="$emit('input', $event)" />
  </div>
</template>

上面的代码会设置<AppFormInput>的值，并会传播（向上）它的input事件。 Form.vue 中的v-model不应该有效。

发布表单空数据

1 个答案: