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

What steps can be taken to ensure that the onchange event functions properly with radio input

I am facing an issue with my input field as the value changes automatically when an option is selected. However, I want this functionality to also work the same way when a radio input option is selected. How can I modify the code to achieve this? func ...

Creating a dynamic configuration for service instantiation in Angular 4/5

Currently working on a library that has an AuthModule with an AuthService for managing OAuth2 authentication using oidc-client-js. I want the application using this library to be able to set up the configuration for the OAuth client. One way to do this is ...

Is it achievable for a modal popup to automatically move to a specified location?

I need assistance with... Is it feasible to display an external webpage within a modal window and have that page automatically scroll to a specific section (such as an anchor point)? ...

What are the repercussions of labeling a function, TypeScript interface, or TypeScript type with export but never actually importing it? Is this considered poor practice or is there a potential consequence?

I find myself grappling with a seemingly straightforward question that surprisingly has not been asked before by others. I am currently immersed in a TypeScript project involving Vue, and one of the developers has taken to labeling numerous interfaces and ...

How to eliminate spacing between photos in a flexbox layout

[Unique] Find the Solution Image inside div has extra space below the image My design showcases various images of different sizes in multiple rows. See an example here. Despite my efforts, there are noticeable gaps between the rows that I can't seem ...

What is the process for including an additional button in the DateTimePicker feature of material UI?

I'm currently utilizing DateTimePicker in my React application. I wish to incorporate a Clear button positioned to the left of the Cancel Button. import { MuiPickersUtilsProvider, DateTimePicker } from "@material-ui/pickers"; import DateFnsUtils fro ...

Creating two separate divs that can scroll independently while also limiting each other's scroll depth can be achieved by utilizing

I am attempting to replicate the unique scrolling feature seen on this particular page. Essentially, there are two columns above the fold that can be scrolled independently, but I want their scroll depths to be linked. When a certain depth is reached whil ...

Display a division in C# MVC 4 when a boolean value is true by using @Html.DropDownList

I have multiple divs stacked on top of each other, and I want another div to appear when a certain value is selected. I'm familiar with using JavaScript for this task, but how can I achieve it using Razor? Below is a snippet of my code: <div id=" ...

Error in AWS Lambda: JSON parsing error due to unexpected token 't' at position 6

I'm currently working on a basic lambda function that utilizes a post request to insert data into DynamoDB. However, every time I deploy the lambda function and test it using Postman, I keep encountering a 502 Bad Gateway error. To troubleshoot this ...

Utilizing AngularJS: Dynamically employ custom directives for enhanced reusability

I am currently developing my debut single page Angular.js application and finding myself in a bit of a rut when it comes to programmatically compiling/evaluating a custom directive to insert it into the DOM from within a controller. The custom directive I ...

Customize specific styles for individual divs one at a time (without the use of jQuery)

Can you assist me with this issue? I am trying to display the <span class="badge badge-light"><i class="fa fa-check-circle"></i></span> tag (initially set to "visibility: hidden") when clicking on a div with the class "role-box". He ...

Dealing with the issue of receiving raw JavaScript in the .ajax error function even when receiving a 200

I am encountering an issue with a jQuery.ajax() call to a third-party product. The POST request is successful, returning a 200 OK status code, but instead of executing the success function, it redirects to the error function. The response variable displays ...

AngularJS Expandable Table - Unlocking Limitless Possibilities

Take a look at the code snippet below: <tbody> <tr ng-repeat-start="ticket in tickets"> <td> <button ng-if="ticket.expanded" ng-click="ticket.expanded = false">-</button> <button ng-if="!t ...

Updating the parent controller's scope from a directive in AngularJS does not reflect changes

HTML: <div ng-app="myApp" ng-controller="Controller"> <test ng-if="toggle" props="condition"></test> </div> Javascript: var myApp = angular.module('myApp', []); myApp.controller('Controller', ['$scop ...

Common reasons why you may encounter the error "Uncaught TypeError: $(...).DataTable is not a function"

I recently started working with DataTable.js, and when I tried to integrate it into my ASP.NET Core MVC 5.0 project, I encountered an error: Uncaught TypeError: $(...).DataTable is not a function After doing some research on Google, I discovered that this ...

The input text in the Typeahead field does not reset even after calling this.setState

As I work on creating a watchlist with typeahead functionality to suggest options as the user types, I encountered an issue where the text box is not resetting after submission. I attempted the solution mentioned in this resource by calling this.setState( ...

Auto Start Feature for jQuery Slider Function

Hey there, I currently have an image slider on my website that allows users to navigate through images by clicking on preview and next buttons. My query is: would it be possible to implement an auto start feature instead of having to click manually? Belo ...

Detach an item from its parent once it has been added to an array

Currently, I am facing an issue with a form on my blog. The blog is represented as an object that contains multiple content objects within it. I seem to be experiencing some confusion because the reactivity of the content I add to the Array persists with t ...

Getting the href values of dynamically changing links with Selenium in Python: A step-by-step guide

Is there a way to extract all hrefs(links) located in anchor tags using JavaScript code with Selenium Python, especially when these links are dynamically updated? The tag I am trying to click on is as follows: enter image description here I have managed t ...

Tips for transferring data from a pop-up or modal window to the main window in ASP.NET MVC

Currently, I am in the process of developing a contact form within ASP.NET MVC. This contact form will allow users to easily attach regular files through traditional file and browse functions. Additionally, users will have the option to search for a specif ...