【问题标题】:How to assign unique IDs to inputs from an input form如何为输入表单中的输入分配唯一 ID
【发布时间】:2021-07-24 20:09:29
【问题描述】:

我知道这可能是一个愚蠢的问题,但我想不通:(

我有一个输入表单:

<form @submit.prevent="customSubmit">
    <label>Name</label>
    <input type="text" v-model="newUser.name" id="name" placeholder="Your Name">
    <label>E-mail:</label>
    <input type="email" v-model="newUser.email" id="email" placeholder="Your Email-Address">
    <label>Mobile Number</label>
    <input type="number" v-model="newUser.number" id="number" placeholder="Your mobile number" @keyup.enter="customSubmit">
        
</form>
<button type="button" class=buttonSignup @click="customSubmit">Submit</button>

数据被处理并被提取到一个小的nodeJS-Server,具有以下功能:

customSubmit(){
    //Check ob alle Felder gefüllt sind
    if(document.getElementById('name').value === ''){return}
    if(document.getElementById('email').value === ''){return}
    if(document.getElementById('number').value === ''){return}
    //POST to API
    const user = {
        method: "POST",
        headers: { "Content-Type": "application/json"},
        body: JSON.stringify({newUser: this.newUser})
    };
                
    fetch("http://localhost:3080/api/user", user)
        .then(response => response.json())
        .then(data => console.log(data));

    this.pushFunction(); //GET-Request to view the data

    this.clearForm();
}

但是,为了能够发送DELETE-Request,我需要为customSubmit()-函数中的每个条目分配唯一的ID。

谁能告诉我如何做到这一点?

提前致谢!

PS:另外请忽略code-sn-ps中的德语cmets。

【问题讨论】:

    标签: javascript forms vue.js http-delete


    【解决方案1】:

    您应该让您的节点服务器创建一个条目并返回一个唯一 ID 作为对您发送的 POST 请求的响应。

    ID 可以是数据库发布的 ID(取决于您使用的数据库),然后它将成为从 fetch 返回的 data 对象的一部分。

    【讨论】:

    • 谢谢,经过一番折腾,结果很好
    猜你喜欢
    • 1970-01-01
    • 2013-01-31
    • 1970-01-01
    • 1970-01-01
    • 2023-03-17
    • 2016-05-07
    • 2021-07-10
    • 2015-05-31
    • 2018-05-28
    相关资源
    最近更新 更多