从Json读取数据并填充Span标记

Question

我使用AlpineJS有以下表单：

<form x-data="inquiry()" x-on:submit.prevent="submit" method="post">
<input type="text" name="email" x-model="data.email">
<span name="email-validator" display="none"></span>
<input type="hidden" name="subject" value="my subject" x-model="data.subject">
<span name="subject-validator" display="none"></span>
<button>Submit</button>
</form>

当我提交有错误的表格时，我会得到Json对象：

{
"errors": {
"email": "The email is required",
"subject": "The subject is invalid"
}
}

对于每个错误，我需要使其验证器span可见，并添加验证消息。

提交javascript代码为：

<script>
function inquiry() {
return {
data: {
email: "",
subject: ""
},
submit() {
console.log(JSON.stringify(this.data));
fetch("/inquiries", {
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(this.data),
})
.then(() => {
this.data.email = "";
})
.catch(() => {
// POPULATE Errors into SPANS here
});
}
};
}

如何做到这一点？

Answer 1

也为验证器文本创建一个对象，这样Alpine.js就可以动态地显示它们，例如x-show="error_msg.email":

<form x-data="inquiry()" x-on:submit.prevent="submit" method="post">
<input type="text" name="email" x-model="data.email">
<span name="email-validator" x-text="error_msg.email" x-show="error_msg.email"></span>
<input type="hidden" name="subject" value="my subject" x-model="data.subject">
<span name="subject-validator" x-text="error_msg.subject" x-show="error_msg.subject"></span>
<button>Submit</button>
</form>

在catch分支，我们在error_msg对象上循环，并设置来自响应对象的错误消息。

function inquiry() {
return {
data: {
email: "",
subject: ""
},
error_msg: {
email: "",
subject: ""
},
submit() {
fetch("/inquiries", {
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(this.data),
})
.then(() => {
this.data.email = "";
})
.catch((response) => {
Object.entries(this.error_msg).forEach(([key, val]) => {
this.error_msg[key] = response.error[key]
})
});
}
};
}