Using Axios to retrieve data from a MySQL database is a common practice in web development. By integrating Vue

I have developed another Vue.js admin page specifically for "writer" where I can display post data fetched from a MySQL database. The admin page called "admin" is functioning properly and responding with all the necessary data.

The following code snippet shows how I want to fetch and display the post data on the Posts page:

<template>
  <div>
      <h1>POSTS</h1>

      <section class="posts-page">

        <div v-for="post in posts" :key="post.id">
              {{ post }}
        </div>
      
      </section>
  
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: []
    }
  },
  created() {
    axios.get('/api/posts/').then(console.table())
  }
}
</script>

<style>

Here is the API PostController.php code snippet that handles fetching posts:

public function index()
{
    return Post::with('user')->latest('id')->get();
}

Thank you for your assistance.

Answer №1

To successfully complete the post, it is essential to insert the axios response.

async mounted(){  
const fetchedPosts = await axios.get('/api/posts/');
this.posts = fetchedPosts.data;
}

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

Combining the powers of Express.js, Sequelize, and advanced form validation

As a beginner with Express and Sequelize, I am looking to utilize Sequelize's validation functionality for form submissions without having to duplicate validations on the frontend or rely on additional libraries like express-validator. Below is an exa ...

Tips for converting a select option into a button

Currently, I am working with Laravel to develop my shopping cart. My goal is to implement a feature that allows customers to select the quantity of a product and have the price update accordingly when they click on a specific number. However, I am facing a ...

CORS headers not functioning as expected for Access-Control-Allow-Origin

Can someone help me figure out how to add Access-Control-Allow-Origin: 'http://localhost:8080' in Node.js and Express.js? I keep getting this CORS error: Access to XMLHttpRequest at http://localhost:3000 from origin 'http://localhost:8080&ap ...

Obtain headers from receiving an external JavaScript file

I am trying to find a way to import an external .js file and access the response headers from that request. <script src="external/file.js?onload=callback"> function callback(data) { data.getAllResponseHeaders(); } </script> Unfortunately, ...

How can I convert duplicate code into a function in JavaScript?

I have successfully bound values to a view in my code, but I am concerned about the duplicate nested forEach loops that are currently present. I anticipate that Sonarcube will flag this as redundant code. Can anyone advise me on how to refactor this to avo ...

JavaScript Cookie Array Handling

Is it possible to create a 2D array as a cookie in JavaScript? If so, how can I go about creating this array cookie and looping through it to retrieve data efficiently? Any guidance on this would be greatly appreciated. Thank you! ...

What is the operational mechanism behind drag and drop page builders?

I am currently delving into my inaugural MERN project, where the functionality requires specific components (such as a checkbox to-do list, images, text, etc...) that empower users to construct various pages, larger multi-checkbox aggregation lists, and be ...

How can I create numerous HTML containers using Javascript?

I've been learning from this tutorial: Instead of just displaying the last database object, I want to display all of them. I have tried outputting the database contents and it's working fine. Now, I just need to adjust the HTML. I attempted to ...

Tips for utilizing a ForEach loop in JavaScript to create an object with dynamically provided keys and values

Looking to create a JavaScript object with the following structure, where the Car Make and Model Names are provided from other variables. { "Sedan":{ "Jaguar":[ "XF", "XJ" ], "AUDI":[ "A6", ...

Obtain the parameter fetching identical identifier

When I click on a search result on the left, I want it to load in the right div without refreshing the page or opening a new one. The search generates three results with pagination. However, no matter which result I click, the same ID loads. Can anyone spo ...

Is JsonEditor capable of editing JSON Schemas effectively?

For a while now, I have been impressed by the functionality of JSON-editor and have been using it to edit documents based on a specific JSON schema. But why stop there? Many users utilize JSON-Editor to make changes to JSON documents according to the corr ...

Struggling to Manage and Preserve Cookies in Browser While Using React App Hosted on GitHub Pages and Node.js Backend Running on Render

I've encountered a challenge with setting and storing cookies in the browser while utilizing a React application deployed on GitHub Pages and a Node.js backend hosted on Render. Let me explain the setup and the issue I'm facing: Setup: Frontend ...

Is there a simpler method for making multiple posts using an AJAX JS loop?

My form is quite extensive and uses AJAX to save. The JavaScript functions are stored in an external file and structured like this: function milestone09() { $.post('./post.3.AIGs2GRA.php?data=' + (secData), $('#milestone09').serialize( ...

Transferring data from a database to a Vue component and storing it in a variable

I've encountered an issue while attempting to retrieve a value from my database and then store it in a variable within my Vue Component. The data retrieval process is successful, but I encounter an error when trying to assign that value to a variable ...

Issues in the d3.js chart

I'm facing an issue with some incorrect lines appearing in my d3.js chart. Strangely, the problem seems to disappear when I switch tabs on Chrome and return to the chart's tab. It's puzzling to figure out the root cause of this issue, so I ...

Using footable js will eliminate all form elements within the table

After incorporating the Footable jQuery library to create a responsive table, I encountered an issue with input tags and select boxes being removed by the Footable JavaScript. It turns all these tags into empty <td> elements. <table id="accordi ...

What is the best way to rotate a cube when it is clicked on?

My current project involves rotating a cube by clicking on buttons either on the cube itself or floating next to it. At the moment, I have them floating for easier testing purposes, but placing them directly on the cube is not an issue. The main issue I&a ...

`Is there a way to modify the attribute text of a JSON in jQuery?`

I'm attempting to modify the property name / attribute name of my JSON object. I attempted it like this but nothing seems to change. After reviewing the input JSON, I need to convert it to look like the output JSON below. function adjustData(data){ ...

Error code SQLSTATE[23000]: Integrity constraint violation: 1062 occurred due to a breach

User details are being updated or created in the database table with the following code: User::updateOrCreate([ 'identifier' => $user->id, 'username' => $user->nickname, 'name' => $user->name, ...

Angular is known for sending only the fields that have changed to the update method

I need help with optimizing my save method. When a user clicks SAVE, I only want to send the fields that have been changed instead of all 50+ fields on the page. This will reduce the amount of data being sent every time. Api.Admin.update({ obsoleteDat ...