Vue.js axios method returns undefined; v-for directive fails to iterate - Issue on Wordpress site

Using a shortcode, I have integrated Vue.js into a Wordpress page.

pl2010_vue_init_directory = pl2010_vue_init_directory || (function(ctx) {
new Vue(
{
  el: '#'+ctx.el,
  data: {
    errorMsg: "",
    successMsg: "",
    showAddModal: false,
    showEditModal: false,
    showDeleteModal: false,
    listings: [],
    newListing: {name: "",tel1: "",email1: ""},
    currentListing: {}
  },
  mounted: function(){
    console.log("Start Mounting...");
    this.getAllListings();
    console.log("End Mounting...");
  },
  methods: {
    async getAllListings(){ 
    this.listings = [];
      axios.get('/scripts/prod/directory.php?action=read').then(response => {
        this.listings = response.data.listings;
        console.log(this.listings)
      })
      .catch(err => {
        console.log(err);
      });
    }
  }
});
});

A quick note: The "getAllListings()" function has been updated and is now functioning properly. You can see the code above for reference.

    <tr class="text-center" v-for="listing in listings">
      <td>{{ listing.id }}</td>
      <td>{{ listing.name }}</td>
      <td>{{ listing.tel1 }}</td>
      <td>{{ listing.email1 }}</td>
      <td><a href="#" class="text-success" @click="showEditModal=true"><i class="fas fa-edit"></i></a></td>
      <td><a href="#" class="text-danger" @click="showDeleteModal=true"><i class="fas fa-trash-alt"></i></a></td>
    </tr>

Thank you!

Answer №1

Give this a shot

async fetchAllEntries() {
    try {
       const response = await fetch("/scripts/prod/folder.php?action=fetch");
       if (response.data.error) {
          console.log("An error occurred");
          errorMessage = res.data.message;
       } else {
          const info = await response.json();
          entries = info.entries;
          console.log(entries);
       }
     } catch (error) {
         console.log(error);
  } 
}

Answer №2

I made some changes to the code mentioned previously and it is now functioning properly. The array has been assigned to a variable named "listings" and its contents are successfully displayed on the page.

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 is the Proper Way to Import Three.js Modules in a Vue Application?

My goal is to utilize three.js for displaying a gltf file. To achieve this, I need to import the GLTFLoader module from the three.js node package. As per the documentation, the correct way to import it is: import { GLTFLoader } from 'three/examples/ ...

Selenium Refuses to Launch My Local Browser Despite Explicit Instructions

While using Chrome browser with selenium, I encountered an issue related to browser profiles. Everything works smoothly when the correct binary path is provided, but if an incorrect path is given, it refuses to run. The specific problem arises when the br ...

Issues with the initial calculator project I built using JavaScript (excluding HTML and CSS)

My first calculator is nearly complete, but I have encountered a challenge. The functionality of my calculator is quite simple; it prompts the user for input using window.prompt and performs addition, subtraction, multiplication, or division based on the u ...

Performing array reduction and summation on objects in JavaScript

Data Analysis: dataSet: [], models: [ { id: 1, name: "samsung", seller_id: 1, count: 56 }, { id: 1, name: "samsung", seller_id: 2, count: 68 }, { id: 2, name: "nokia", seller_id: 2, count: 45 }, { id: 2, name: "nokia", seller_id: 3, count: ...

Tips for preloading a script in nextjs

I'm having trouble incorporating a script into my website. The issue is that the script doesn't load properly the first time the page loads, but after a few refreshes, it works and the responsible iFrame shows up. I've attempted several di ...

Ensuring that the desired DOM elements have loaded before attempting to manipulate them in Vue.js

I've been struggling with this issue for the past day and I'm completely stuck. In my vue file, there's a method that operates like this: methods: { showSlides(n) { let slides = document.getElementsByClassName("mySlides"); ...

Removing duplicate entries in child components fields using Vue JS

I am facing an issue with a child component that retrieves repeating data from an Axios request. List of Colors: blue, blue, red, orange, green, green, blue Child Component <div v-if="color"> <strong> Color:</str ...

Utilizing an array for assigning values in conditional statements

I have been experimenting with toggling a CSS style on a couple of elements using an if statement. Currently, I have it working with several if statements, but I believe it can be simplified by utilizing an array with the values and just one if statement. ...

Utilizing an AngularJS factory to retrieve JSON data from the server

I have a large JSON object in my controller that I want to move to a separate file. Currently, this is how I'm approaching it: myApp.controller('smController', ['$scope', function($scope) { ... var stadtmobilRates = { cla ...

The content is not displayed in the d3 visualization

While examining the code of this visualization found at http://bl.ocks.org/mbostock/4062045, I noticed that the name from the JSON file is not displaying alongside the nodes. Even though the code includes: node.append("title").text(function(d) { return ...

An alternative solution for supporting Edge Chromium is utilizing synchronous AJAX requests within the beforeunload event

While attempting a synchronous ajax request during the beforeunload event, I encountered an error stating that synchronous ajax requests are not supported in chromium browsers during page unload events. I am seeking alternatives for making a synchronous a ...

Click on the button to automatically scroll to a specific component inside the dialog

In my JSF/Primefaces application, I have a page with a long content that can be scrolled, along with a dialog also containing lengthy content that requires scrolling. The dialog includes a button and I am looking to scroll the dialog content to a specific ...

Change the background color of a MUI ToggleButton based on a dynamic selection

const StyledToggleButton = styled(MuiToggleButton)(({ selectedColor }) => ({ "&.Mui-selected, &.Mui-selected:hover": { backgroundColor: selectedColor, } })); const FilterTeam = (props) => { const [view, setView] = ...

What is the best way to use a generic callback function as a specific argument?

TS Playground of the problem function callStringFunction(callback: (s: string) => void) { callback("unknown string inputted by user"); } function callNumberFunction(callback: (n: number) => void) { callback(4); // unknown number inputt ...

Employ the power of a static force layout to forge an intricate web of connections within the realm of

I have found a great network that works really well. It automatically updates the node position when the size of the window changes. Now, I want to make it fixed. What I mean by this is that I want to compute a certain number of ticks (let's call it ...

Tips for modifying jsFiddle code to function properly in a web browser

While similar questions have been asked before, I am still unable to find a solution to my specific issue. I have a functional code in jsFiddle that creates a table and allows you to select a row to color it red. Everything works perfectly fine in jsFiddle ...

Create a three-dimensional tree array in Typescript/Javascript by transforming a flat array

Received data is structured as follows: const worldMap = [ { "name": "Germany", "parentId": null, "type": "Country", "value": "country:unique:key:1234", "id&qu ...

Object.assign versus the assignment operator (i.e. =) when working with React components

Just a quick question: I've come across some answers like this one discussing the variances between Object.assign and the assignment operator (i.e. =) and grasp all the points made such as object copying versus address assignment. I'm trying to ...

Setting the z-index for a JavaScript plugin

I need help with embedding the LinkedIn plugin into a website that has stacked images using z-index for layout. I have tried assigning the plugin to a CSS class with a z-index and position properties, but it hasn't worked as expected. Can anyone sugge ...

"Trouble connecting Sequelize associations with API routes, resulting in unsuccessful retrieval of data from the database

I am currently navigating the complexities of sequelize and express, facing challenges with database associations and data retrieval. My project involves a boarders-boards (focused on surfboards and riders) database with three main models: Boards, Riders, ...