Using Vue.js 3 to fetch data from a REST API using the Axios

How do I properly retrieve and display an array using axios.get in Vue? The data is not showing up in my table cells when I use the v-for directive. Could the issue be related to the v-for statement?

      <tr v-for="params in form" :key="params">
        <td>{{params.title}}</td>
        <td>{{params.company}}</td>
        <td>{{params.company_url}}</td>
        <td>{{params.location}}</td>
        <td>{{params.description}}</td>
        <td>{{params.date_posted}}</td>
      </tr>
<script setup>
import axios from 'axios';
import { useRouter } from 'vue-router';




axios.get("API_URL/list",{
  params: {
        title: "",
        company: "",
        company_url: "",
        location: "",
        description: "",
        date_posted: "",
  }
})
.then((res)=>{
  console.log(res.data)
  return res.data
})

Is it correct to use axios.post to submit form data with parameters? Are there any improvements needed in how the data is being sent through this method?

const state = reactive({
  form: {
  title: "",
  company: "",
  company_url: "",
  location: "",
  description: "",
  date_posted: ""
  },
});
const formCreate = async () => {
     const postdata = {
        title: state.form.title,
        company: state.form.company,
        company_url: state.form.company_url,
        location: state.form.location,
        description: state.form.description,
        date_posted: state.form.date_posted,
      };

Answer №1

Looks like there might be a task missing in your project. If you're unsure about how the form is structured, it's recommended to utilize a ref or a reactive approach to store the data.

Give this a shot:

<tr v-for="item in form" :key="item.id">
  <td>{{item.title}}</td>
  <td>{{item.company}}</td>
  <td>{{item.url}}</td>
  <td>{{item.location}}</td>
  <td>{{item.description}}</td>
  <td>{{item.posted_date}}</td>
</tr>
<script setup>
  import axios from "axios";
  import { useRouter } from "vue-router";
  import { ref } from "vue";

  const form = ref([]); 

  axios
    .get("API_URL/data", {
      params: {
        title: "",
        company: "",
        url: "",
        location: "",
        description: "",
        posted_date: "",
      },
    })
    .then((response) => {
      console.log(response.data);
      form.value = response.data; 
    });
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Iterate through each row in a table to locate a particular control by its ID and retrieve its

Is there a way to write a jQuery function that can loop through table rows and find hidden field values based on a specific hidden control ID ("hdnIsEmpty") without affecting other hidden controls? I'm facing this challenge and need help with finding ...

Tips on improving a function that verifies the existence of an image used as a CSS background to output a boolean value

I have encountered a challenge while working on a react file-upload component. The issue at hand is relatively simple - I aim to display an icon corresponding to the file extension for each uploaded file. These icons are loaded through css as background im ...

There seems to be an issue with the CSV file, possibly indicating an error or the file may not be an SYLYK file when

After developing a node.js script to convert an array object into CSV format using the "objects-to-csv" library from NPM, I encountered an issue when opening the generated CSV file in WPS and Microsoft Office. The warning suggested that there was either an ...

What is the best way to differentiate and analyze new AJAX output from previous data using div elements?

Embarking on a project to develop a high/low game using JavaScript, I encountered a perplexing issue where the displayed numbers seemed to be out of sync with the variables stored. This discrepancy left me scratching my head as I struggled to get them to a ...

Tips for passing a function and an object to a functional component in React

I am struggling with TypeScript and React, so please provide clear instructions. Thank you in advance for your help! My current challenge involves passing both a function and an object to a component. Let's take a look at my component called WordIte ...

transforming an array into JSON structure using node.js

Hello, I have a list of data that I need to convert into JSON format. Here is an example of how I want the data to look: [ { "slideName": "s0", "imageUrl": "https://s3.amazonaws.com/lifestyle345/testing/slides/cbaa5e650152a0332b494f0074985 ...

What is the best location to manage errors within a sequelize ORM query?

I am working with the Sequelize ORM within a Node/Express environment. My database has two tables: one for Users and another for Items. The Item table includes a foreign key that is linked to the UserId in the User table. Whenever I attempt to create an ...

how can I use jQuery to disable clickable behavior in HTML anchor tags?

Here is the HTML code I am working with: (note -: I included j library on the top of page ) <div class="WIWC_T1"> <a href="javascript:void(0);" onClick="call_levelofcourse();popup('popUpDiv1')">Level of Course</a> </di ...

Troubleshooting Vue computed property access issues

Currently, I am in the early stages of learning Vue and have moved on to exploring validation. While looking at some older examples that utilize Vee-Validate, it seems that there has been recent changes to the library. How can I update this code to work w ...

triggers an unexpected error in console.log

I need help with the following code: function printName(obj) { console.log(obj.name); } printName({ name: "myName" }); (function displayError(errorMsg){ console.log(errorMsg); })("Error"); However, when I try to run this code, I am encountering a T ...

Issues with jKit Pagination (Controlling Size by Height)

I'm currently utilizing the jkit paginate feature to limit the number of items by height, with the setting at 910 pixels. Everything works fine when there is enough content to exceed this limit and create a second page. However, if the content falls ...

Fill your HTML form effortlessly using data from Google Sheets

I am relatively new to this topic, but I'm seeking a solution to populate an Apps Script Web App HTML dropdown form with names directly from a Google Spreadsheet. At the moment, I've managed to retrieve an array of names from column A in my sprea ...

What is the best way to effectively handle the proxying of objects across multiple levels?

As illustrated in a Stack Overflow thread, utilizing Proxy objects is an effective method for monitoring changes in an object. But what if you need to monitor changes in subobjects? In such cases, you will also have to proxy those subobjects. I am curren ...

Switch off any other currently open divs

I'm currently exploring a way to automatically close other div's when I expand one. Check out my code snippet below: $( document ).ready(function() { $( ".faq-question" ).click(function() { $(this).toggleClass('open'); $(this ...

How to access webpack's require.context feature on the development server

In my webpack development configuration, I have set up a mocked backend using Express. Following an example from the DevServer Docs, my setup looks something like this: module.exports = { // ... devServer: { setupMiddlewares: (middlewares, devServe ...

Error message: "The variable 'bitmap' is not defined in jQuery/CreateJS $.ajax"

I recently acquired a product designer that uses CreateJS and jQuery. Within the code, there is a function called UrlLoader which wraps an $.ajax call. function UrlLoader(params) { $.ajax({ url: url, type: 'POST' ...

Storing a screen value with javascript made simple

I need to incorporate memory functions into my calculator, specifically MS (Memory Store), MR (Memory Restore), and MC (Memory Clear). For Memory Store, the screen value of the calculation needs to be saved, so if it's 90 + 7 = 97, that result should ...

Deactivate the save button in case of errors occurring with Laravel and Vuetify

Currently, I am utilizing the Vuetify v-text-field within a form. I have implemented some basic validation rules (such as requiring the field to be filled) which can be checked using simple rules like (:rules="[ rules.required ]"). However, in ad ...

Leveraging JavaScript within PHP script

I am currently developing a booking system that involves creating events in a table using PHP. I want to implement a script that will run when a user tries to book an event and then submits the form to PHP. This script will help me determine if the user ha ...

Show an HTML image encoded in base64 from its origin

Is there a way to embed a base64 image in HTML without having to paste the entire code directly into the file? I'm looking for a more efficient method. For example: <div> <p>Image sourced from an online repository</p> <img src=" ...