在Vue中更改json数据后，如何在屏幕上重新呈现表组件？

bvn4nwqk 于 2023-01-31 发布在 Vue.js

关注(0)|答案(3)|浏览(169)

我是在一个初学者的水平和学习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可能会起作用，但我不确定这是否真的是解决方案，我将非常感谢你的帮助。

vue.js

来源：https://stackoverflow.com/questions/75266808/how-do-i-re-render-a-table-component-on-screen-after-changing-json-data-in-vue

3条答案

按热度按时间

cbjzeqam1#

一旦您在保存时从POST方法API调用获得成功响应，可能有两种解决方案**：**

您可以将userData对象从模态组件emit到父对象，并将此发出的对象推入表数据数组。
成功保存后，您可以将成功标志从模态组件emit到父组件，然后调用GET调用从API本身接收真实的数据，并将整个数据绑定到表中。

在模态分量中**：**

handleSave() {
    ...
    ...     
    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.$emit('save-success'); ✅
        this.$router.push("/"); ❌
    })
}

在父组件中**：**

<modal-component @save-success="getTableData"></modal-component>

getTableData() {
  // Make an API call to get the real time updated data and assign that to the table data items variable.
}

赞(0）回复(0）举报 2023-01-31

y4ekin9u2#

我在这方面也是新手。但是在UNi（不久前）我们用 AJAX 做了一个类似的海豚。所以我上网查了这个How to use AJAX with VUE?。也许这会帮到你。
你可能仍然需要在服务器端做一个事件， AJAX 只是让你不必刷新页面来获取新的数据。
希望这对你有帮助祝你好运。

赞(0）回复(0）举报 2023-01-31

2cmtqfgy3#

组件保存完毕后，可以执行emit the new data，然后在表组件中监听事件并将新数据添加到表数据中，如下所示：

// in your TeamAddModal
{
  ...
      handleSave() {
        ...
        fetch(...)
          .then(() => {
            this.$emit('addUser', userData)
            this.$router.push("/"); // not sure why you are doing that
          })
        ...
      }
    },
    ...
}

// in your Table component
<TeamAddModal @addUser="userData => tableData.push(userData)" />

赞(0）回复(0）举报 2023-01-31

我来回答

在Vue中更改json数据后，如何在屏幕上重新呈现表组件？

3条答案

相关问题

热门标签

最新问答