无法将用户输入推送到 VueJS3 中的数组

Question

您好，很抱歉新手问题 我试图在按钮单击时将 HTML 输入推送到现有数组中，但我找不到我的错误。 任何人都可以发现错误吗？ console.log(user) 保持未定义，我不知道为什么我创建的 let newUser() 没有被推送到数组中。

    <template>
     <div> 
      <form @submit.prevent="customSubmit">
       <label>Name</label>
       <input type="text" required name="name" id="name">
       <label>E-mail:</label>
       <input type="email" required name="email" id="email">
       <label>Mobile Number</label>
       <input type="number" required name="number" id="number">
      </form>

      <button type="submit" class=buttonSignup @click="customSubmit">Submit</button>

     </div>
    </template>

<script>
 export default {
  data() {
   return{
     
        user:[{
            name: '',
            email:'',
            number:''
        }]
    };
},
methods: {
 
    
    customSubmit(){
        
        let newUser = {
            name: document.getElementById('name').value,
            email: document.getElementById('email').value,
            number: document.getElementById('number').value
        }
        this.user.push(newUser)
        console.log(this.user.value)
         
    },

    
  }
 }
</script>

Answer 1

使用 Vue，您可以使用 v-model 而不是直接访问 DOM。例如，您可以通过以下方式重写代码：

• 将 name=name 更改为 v-model=user.name
• 使用user 和users。 user 收集一个用户的数据，users 将所有用户输入收集到一个数组中。这反映在修改后的 customSubmit 中。
• 每次输入后重置user。
• 有更优雅的方法可以做到这一点，但这是最清晰且与您的原始代码足够接近的方法。

<template>
  <div>
    <form @submit.prevent="customSubmit">
      <label>Name</label>
      <input type="text" required v-model="user.name" id="name">
      <label>E-mail:</label>
      <input type="email" required v-model="user.email" id="email">
      <label>Mobile Number</label>
      <input type="number" required v-model="user.number" id="number">
    </form>

    <button type="submit" class=buttonSignup @click="customSubmit">Submit</button>
    <br/>
    You typed:<br/>
    name: {{user.name}}<br/>
    email: {{user.email}}<br/>
    number: {{user.number}}

  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],

      user: {
        name: '',
        email: '',
        number: ''
      }
    };
  },
  methods: {


    customSubmit() {
      // do some checking here
      this.users.push(this.user)
      this.user = {name:'', email:'', number:''};
      console.log(this.users)

    },


  }
}
</script>