CODEWITHSUNDEEP
javascriptwordpressvue.jsvuejs2axios
Neil Reardon
Neil Reardon

Reputation: 65

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

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(){
    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);
      });
    }
  }
});
});

NOTE: I have updated the "getAllListings()" function. The working code is above. The values now output ok.

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

Upvotes: 0

Views: 122

Answers (2)

Neil Reardon
Neil Reardon

Reputation: 65

Amended the code above and it is now working ok. Array is assigned to "listings" and outputs on the page.

Upvotes: 0

Freedom Essence
Freedom Essence

Reputation: 100

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);
  } 
}

Upvotes: 1

Related Questions