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.

CodePudding user response：

i am also new at this. But at UNi (not that long ago) we used ajax for a similar porpoise. So I went online and looked up this How to use AJAX with VUE?. Maybe this will help you out.

You will still probably have to do an event on the server side. Ajax just takes care that you don't have to refresh the page in order to get new data on it.

Hope this helps. Best of luck! N.

CodePudding user response：

When your component is done saving, you can emit the new data. Then in your table component, you can listen to the event and add the new data to the table data. It looks something like this:

// 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)" />

CodePudding user response：

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