Vue：如何检查嵌套输入是否为空

如何解决Vue：如何检查嵌套输入是否为空

我有 FormField、Form 和 App。 App 包含 Form，Form 包含 FormField 和一个按钮。单击按钮时，我需要检查 Form 中的 <input> 是否不为空。我该怎么做？

https://codesandbox.io/s/dark-tdd-wd2nb?file=/src/components/Form.vue

FormField.vue

<template>

  <input :placeholder= "placeholder"
    
 />

</template>

<script>
export default {
  props: ['placeholder']
}
</script>

Form.vue

<template>
  <form v-on:submit.prevent="execute">
    <div  >{{title}}</div>

    <div   v-if="wasError">{{errorMessage}}</div>

    <FormField
               v-for="(field) in fields"
               v-bind:key="field"
               :placeholder="field"
               :name = "field"
    />

    <button  @click="handleClick">Button</button>

  </form>
</template>


<script>

import FormField from "@/components/FormField";

export default {
  components: { FormField},props: {
    wasError:  {
      type: Boolean,required: false
    },errorMessage:  {
      type: String,title: {
      type: String,required: true
    },fields: {
      type: Array,required: true
    }
  },methods: {
    handleClick: function(){
       alert("hello");
    }
  }
}

</script>

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />

  <Form title = "Sign Up"  
             :fields="['Username','Email','Password']"
             :wasError = "errorStuff.wasError"
             :errorMessage = "errorStuff.errorMessage"/>
 </template>

<script>
import Form from "@/components/Form";

 export default {
  name: "App",components: {
    Form
   },data()  {
    return {
      fields: [
        'Username','Password'
      ],username: '',email: '',password: '',errorStuff:  {
        wasError: false,errorMessage: ''
      }
    }
  },};
</script>

解决方法

您可以设置 <input>.required 以便浏览器在提交时防止出现空白条目：

<!-- FormField.vue -->
<input required>

如果只需要某些字段，则必须使用 <FormField> 道具进行绑定。另请注意，如果 <FormField> 的根元素是 <input> 本身，则您不必重新声明 <input> 道具，因为默认情况下，根会继承绑定在 {{ 1}}。

我会将 <FormField> 更新为具有 fields[] 和 name 属性的对象，这些属性可用于绑定到 required 道具：

<FormField>

然后更新 export default { data() { return { fields: [ { name: 'Username',required: true,},{ name: 'Email',{ name: 'Password',{ name: 'Nickname',required: false,} ],} } } 上的绑定以使用新的 <FormField> 属性：

field

demo