Vue.js axios method mounts undefined; v-for does not work – WordPress page

by

I am calling Vue.js using a shortcode on 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(){
    var test = this.getAllListings();
    console.log("Start Mounting...");
    this.getAllListings();
    console.log(this.getAllListings);
    console.log(test);
    console.log("End Mounting...");
  },
  methods: {
    async getAllListings(){
      console.log("Method 2");
      axios.get('/scripts/prod/directory.php?action=read')
      .then((response) => {
        this.listings = response.data;
        console.log(this.listings);
        return this.listings;
      })
    }
  }
});
});

NOTE: I have updated the "getAllListings()" function. I am now returned the correct number of rows but they are all blank. The "v-for" loop has something in it but I cannot output the values.

    <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>

How can I output the values and not just the blank rows?

Thank you!

1 thought on “Vue.js axios method mounts undefined; v-for does not work – WordPress page”

  1. Try this

    async getAllListings() {
    try {
       const res = await fetch("/scripts/prod/directory.php?action=read");
       if (res.data.error) {
          console.log("Error");
          errorMsg = response.data.message;
       } else {
          const data = await res.json();
          listings = data.listings;
          console.log(listings);
       }
     } catch (err) {
         console.log(err);
  } 
}
    Reply

Leave a Comment