How can I pass a data object to a backend function and use it to dynamically create a new table row in VueJS?

Question

How can I pass a data object to a backend function and use it to dynamically create a new table row in VueJS?

I am looking for a way to pass an object through a function and then dynamically add a table row with the data from that object. In my backend, I need to first send the "row" object to the function. While I know how to add table rows using vanilla JS and jQuery, I am unsure of how to accomplish this in VueJS. Can you provide guidance on achieving this?

HTML TABLE

<table id="tableID"></table>

HTML CODE NEEDED TO BE ADDED USING THE DATA FROM THE "ROW" OBJECT

<tr v-for="item in items" :key="item.Id" v-bind:id="item.Id" class="e-tr">
                                <td><input type="text" class="c-cell" v-model="item.Type"/></td>
                                <td><input type="text" class="c-cell" v-model="item.Model"/></td>
                            </tr>

JAVASCRIPT

add: function () {
            var row = { Id: 0, Type: 0, Model: 0 };
            fetch('/Cont/Send', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(row)
            })
                .then(function (response) {
                    return response.json();
                })
                .then(function () {
                    /*insert additional HTML code here?*/
                })
        }

javascript vue.js

Answer 1

Answer №1

If you are storing the data in 'items', you must update its value within the 'add' method and also retain the reference to the component itself using 'this'. One approach, utilizing async/await, could be:

<script>
export default {
  name: "MyComponent",
  data() {
    return {
      items: []
    };
  },
  methods: {
    async sendMyData() {
      const response = await fetch(
        "/Cont/Send", {
            // Configure HTTP method and headers
        }
      );
      const data = await response.json();
      this.items = Object.values(data.bpi);
    }
  }
};
</script>

Another way would be using promise chaining (then):

<script>
export default {
  name: "MyComponent",
  data() {
    return {
      items: []
    };
  },
  methods: {
    sendMyData() {
      const self = this;
      fetch("/Cont/Send", {
            // Configure HTTP method and headers
        }
      ).then(function(response) {
        return response.json();
      })
      .then(function(data) {
        self.items = data;
      });
    }
  }
};
</script>

Note: Apologies for any errors in my English.

Answer 2

If you are storing the data in 'items', you must update its value within the 'add' method and also retain the reference to the component itself using 'this'. One approach, utilizing async/await, could be:

<script>
export default {
  name: "MyComponent",
  data() {
    return {
      items: []
    };
  },
  methods: {
    async sendMyData() {
      const response = await fetch(
        "/Cont/Send", {
            // Configure HTTP method and headers
        }
      );
      const data = await response.json();
      this.items = Object.values(data.bpi);
    }
  }
};
</script>

Another way would be using promise chaining (then):

<script>
export default {
  name: "MyComponent",
  data() {
    return {
      items: []
    };
  },
  methods: {
    sendMyData() {
      const self = this;
      fetch("/Cont/Send", {
            // Configure HTTP method and headers
        }
      ).then(function(response) {
        return response.json();
      })
      .then(function(data) {
        self.items = data;
      });
    }
  }
};
</script>

Note: Apologies for any errors in my English.

How can I pass a data object to a backend function and use it to dynamically create a new table row in VueJS?

Answer №1

Similar questions

Issue with clicking a button in Selenium using JavaScript for automation

Keep image height consistent and prevent resizing

The retrieval of data from AWS Dynamodb in Node.js is not done synchronously

Retrieving a result from the reduce function in Angular

Restricting specific devices and browsers access to my website

An error occurred while running JavaScript in Selenium WebDriver

Having trouble transferring file object from reactjs to nodejs

Mouse click not functioning as anticipated

Creating personalized HTML tags using React.js

Material-ui does not adjust Typography color based on the theme selected

Is there a way to load and play different sounds on multiple audio players based on the length of an array?

Issue with v-mask not being applied after data fetch in VUE.js

Unable to trigger dispatchEvent on an input element for the Tab key in Angular 5

Implementing custom logic in a Vuetify dialog box

How can you ensure a div stays at the top or bottom of a page based on the user's scrolling behavior?

Utilizing a dropdown menu in HTML to dynamically alter the URL of a button using JavaScript

Adjust regex for image URLs in JavaScript to handle unique and special cases

Storing data efficiently with Angular 2's local storage service

Issue with Primeng 16: carousel styles failing to load properly

Unable to display cgi script results on webpage <div> with javascript