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

Passing an anonymous function as a parameter to a function in ng-init is a common practice in AngularJS v1.4.8

Is it possible to save a call to an anonymous function using ng-init? For example: <div class="container-fluid" ng-app="AVF" ng-controller="ConfigController" ng-init="RegisterInitFunction(function() { $scope.GetData(); })" > In my controller: ...

Behat automates the process of populating form fields that are dynamically displayed as 'visible'

I'm facing an issue with a form that has hidden fields. When a user selects a checkbox, some of the hidden form fields are supposed to be revealed using the jQuery function slideToggle(). The code itself is pretty simple and you can see an example her ...

Utilize a single array to point to multiple elements

I am curious about the potential to create a unique scenario using JavaScript. Imagine having two arrays: a = [1, 2, 3] b = [4, 5, 6] What if we could combine these arrays into a new array, c, that encapsulates both: c = [1, 2, 3, 4, 5, 6] The intrigui ...

Using AJAX to submit a form to a CodeIgniter 3 controller

I am working on adding a notification feature and need to run an ajax query through the controller when a button is clicked. Here's the script I'm using: $('#noti_Button').click(function (e) { e.preventDefault(); ...

"Efficiently fetch data with an Express GET request without the

My goal is to send the client the HTML page (create.html) in response to a GET request triggered by a button click using fetch. I am intentionally avoiding the use of a form due to formatting and potential scalability issues. The code acknowledges that the ...

Is it possible to utilize gulp to eliminate all require.js define([...]) wrappers throughout the codebase?

Is it possible to test my app without using require.js in order to assess the performance and file size if all files were concatenated into a single one? I'm contemplating using gulp to gather all *.js files in the app, running a gulp-replace to elim ...

Utilizing Angular to intercept AJAX requests, verifying internet connectivity before proceeding with sending the request

In my Angular (with Ionic) app, I have this code snippet: my_app.factory('connectivityInterceptorService', ['$q', '$rootScope', function ($q, $rootScope) { var connectivityInterceptorServiceFactory = {}; var _request ...

Learn about generating PDF files with React Native Expo using the react-native-html-to-pdf library!

I'm currently attempting to execute a 'Hello World' code utilizing the react-native-html-to-pdf library in order to generate a PDF, but I am encountering difficulties setting it up in Expo. Would you be able to provide assistance? I have tri ...

The JSON retrocycle function selectively converts certain references only

I have an array of objects with some cyclic references. To handle this, I used JSON.decycle when sending the object via JSON and JSON.retrocycle on the receiving end. For example: var refactor_data = JSON.retrocycle(JSON.parse(event.data)); The issue is ...

Issues with the functionality of the ZeroClipboard Angular plugin

"> I'm fairly new to Angular and currently experimenting with a module called ZeroClipboard. I've made adjustments to my application in order to incorporate the module and configured it as per the demonstration. var app = angular.module(&a ...

Perform an update followed by a removal操作

I've been facing a persistent issue that has been troubling me for quite some time now. The setup involves a database in MariaDB (using WAMP) and an API in ExpressJS. Within the database, there are two tables: "menu" and "item," with a foreign key rel ...

Managing State Changes with Redux

Reducers in Redux are primarily designed to be pure functions that take the previous state and an action as arguments, and return a new state object without mutating the previous state. However, it is still possible for developers to directly mutate the st ...

Does the built-in waiting mechanism in Protractor automatically handle promises?

While browsing through Stack Overflow, I stumbled upon this response in a discussion about Protractor tests and asynchronous solutions: 'AFAIK expect waits internally for the related promises.' I have tried looking through the official Protract ...

What are the steps to create offline documentation for sails.js?

I am looking to integrate offline sails.js documentation into my system. You can find the official documentation for sails.js maintained at this Sails.js Documentation. According to their documentation, they use doc-templater for building the documentati ...

Steps to verify if a value is an integer:

Lately, I've been working on a "spinner" that increments and decrements a number by 1 each time. However, I'm struggling to add validation to the program so that it only accepts integers (no decimals). I've tried looking into NaN and parseVa ...

Utilize the key as the value for options within an object iteration in Vue.js

I have an object called colors, which stores color names: { "RD": "Red", "BL": "Blue", "GR": "Green", "YW": "Yellow" } In my dropdown menu, I'm generating options for each color in the colors object: <select v-model="colors"> <op ...

Unable to locate the node module within the Rails stimulus controller

I'm facing an issue with integrating my own npm package into a Rails application that I have developed. It's unclear whether the problem lies in the creation of the node package or within the rails app itself. The package in question is fairly ...

A guide to organizing elements in Javascript to calculate the Cartesian product in Javascript

I encountered a situation where I have an object structured like this: [ {attributeGroupId:2, attributeId: 11, name: 'Diamond'}, {attributeGroupId:1, attributeId: 9, name: '916'}, {attributeGroupId:1, attributeId: 1, name ...

Steps to create a custom function that can manage numerous onclick actions to toggle the visibility of a specific field

I'm relatively new to coding and JavaScript. I'm working on a basic webpage that involves showing and hiding parts of sentences for language learning purposes. Is there a way to create a single function that can show and hide the sentence when a ...

The files being requested by jQuery Slimbox are not being retrieved properly

I am currently utilizing jQuery slimbox along with its Application Programming Interface (API). Below is the JavaScript code snippet that retrieves image paths through JSON and then triggers the slimbox using its API. $('#main-container').appen ...