CODEWITHSUNDEEP
vue.jsvue-componentvuejs3
Young Aude Leigh
Young Aude Leigh

Reputation: 41

How do I re-render a table component on screen after changing json data in Vue?

I am at a beginner level and learning vue at the moment.

All I am trying to do at the moment is having the table reload(re-render) itself so that the change from db.json file is applied on the table on the screen. I created a modal that adds data (name, email, contacts) to the db.json file once the save button is clicked.

However, the problem is that I have to manually reload the page (by pressing ctrl+R) in order for the changed data to be applied on the table.

Here is the script section of "Modal.vue" file (child component)


<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>

I would like the parent component(with the table) to re-render and show the change in json data once the 'save' button is clicked from the modal.

I have tried searching up for the solution in google and youtube, and it seems that :key may do the work, but I'm not sure if that really is the solution. I'll be very grateful for the help.

Upvotes: 1

Views: 311

Answers (1)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27242

Once you get success response from the POST method API call on save, There could be a two solutions :

  • You can emit the userData object from modal component to parent and push this emitted object in the table data array.
  • On successful save, You can emit a success flag from modal component to parent component and then invoke a GET call to receive real time data from an API itself and bind the whole data into table.

In modal component :

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("/"); ❌
    })
}

In parent component :

<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.
}

Upvotes: 2

Related Questions