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

【问题标题】：Vue: how to check if nested input is emptyVue：如何检查嵌套输入是否为空
【发布时间】：2023-03-15 10:08:01
【问题描述】：

我有 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,
      required: false
    },
    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', 'Email', 'Password'
      ],
      username: '',
      email: '',
      password: '',

      errorStuff:  {
        wasError: false,
        errorMessage: ''
      }
    }
  },

};
</script>

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

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

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

如果只需要一些字段，则必须使用 <FormField> 属性进行绑定。另请注意，如果<FormField> 的根元素是<input> 本身，则不必重新声明<input> 属性，因为根默认情况下会继承绑定在<FormField> 上的任何属性/属性。

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

export default {
  data()  {
    return {
      fields: [
        {
          name: 'Username',
          required: true,
        },
        {
          name: 'Email',
          required: true,
        },
        {
          name: 'Password',
          required: true,
        },
        {
          name: 'Nickname',
          required: false,
        }
      ],
    }
  }
}

然后更新<FormField> 上的绑定以使用新的field 属性：

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

demo

【讨论】：