我是在一个初学者的水平和学习vue的时刻。
现在我所要做的就是让表重新加载(重新呈现),这样来自db.json文件的更改就可以应用到屏幕上的表上。我创建了一个模态,一旦单击保存按钮,它就会将数据(姓名、电子邮件、联系人)添加到db.json文件中。
但是,问题是我必须手动重新加载页面(通过按ctrl+R),才能将更改的数据应用到表上。
以下是“Modal.vue”文件(子组件)的脚本部分
<script>
export default {
name: "TeamAddModal",
props: {
visible: Boolean,
variant: String,
},
data() {
return {
openClose: this.visible,
memberName: "",
memberEmail: "",
memberContacts: "",
};
},
methods: {
showModal() {
this.openClose = !this.openClose;
},
handleSave() {
if (this.memberName.length > 0) {
console.log(this.memberName, this.memberEmail, this.memberContacts);
this.openClose = !this.openClose;
let userData = {
name: this.memberName,
email: this.memberEmail,
contacts: this.memberContacts,
};
fetch("http://localhost:3000/teaminfo", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(userData),
})
.then(() => {
this.$router.push("/");
})
.catch((err) => console.log(err));
this.memberName = "";
this.memberEmail = "";
this.memberContacts = "";
}
},
},
watch: {
visible: function (newVal, oldVal) {
this.openClose = newVal;
console.log("new" + newVal + "==" + oldVal);
},
},
};
</script>
我希望父组件(带有表)重新呈现并显示json数据中的更改,一旦从模态中单击“保存”按钮。
我试着在google和youtube上搜索解决方案,似乎是:key可能会起作用,但我不确定这是否真的是解决方案,我将非常感谢你的帮助。
3条答案
按热度按时间cbjzeqam1#
一旦您在保存时从
POST
方法API调用获得成功响应,可能有两种解决方案**:**emit
到父对象,并将此发出的对象推入表数据数组。emit
到父组件,然后调用GET调用从API本身接收真实的数据,并将整个数据绑定到表中。在模态分量中**:**
在父组件中**:**
y4ekin9u2#
我在这方面也是新手。但是在UNi(不久前)我们用 AJAX 做了一个类似的海豚。所以我上网查了这个How to use AJAX with VUE?。也许这会帮到你。
你可能仍然需要在服务器端做一个事件, AJAX 只是让你不必刷新页面来获取新的数据。
希望这对你有帮助祝你好运。
2cmtqfgy3#
组件保存完毕后,可以执行emit the new data,然后在表组件中监听事件并将新数据添加到表数据中,如下所示: