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

Posted 2023-02-16

【中文标题】无法将用户输入推送到 VueJS3 中的数组

【英文标题】：Can't push user-input to array in VueJS3

【发布时间】：2021-07-19 08:33:45

【问题描述】：

您好，很抱歉新手问题 我试图在按钮单击时将 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>

【问题讨论】：

你的对象中没有this.user.value，有this.user[0].name、this.user[0].email和this.user[0].number ...控制台日志this.user第一个看到你甚至推送任何东西。此外 this.user 是对象数组，因此您需要将其中一个作为目标来获取名称，通过电子邮件发送一个号码。或者，如果您以 this.user 为目标，则应该将所有对象放入其中。

【参考方案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>

【讨论】：

非常感谢！这比以前的解决方案建议的还要好。而且对 vue 来说感觉自然多了。