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

Question

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!

before using v-for add a check whether or not listings is populated — RajkumarG
– RajkumarG, Commented Feb 14, 2021 at 15:29
The console.log(listings) in the getAllListings() method outputs all the records. But console.log(this.getAllListings) displays no data. — Neil Reardon
– Neil Reardon, Commented Feb 14, 2021 at 15:39

Freedom Essence · Accepted Answer · 2021-02-14 21:04:15Z

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

answered Feb 14, 2021 at 21:04

Freedom Essence

1001 gold badge2 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Neil Reardon Over a year ago

Thanks for your input but this did not work, unfortunately. I have, however, had some success by updating the "getAllListings()" function. Now the "v-for" loop returns the correct number of rows but they are all blank. I cannot figure out why this is happening!

Neil Reardon · Accepted Answer · 2021-02-15 13:56:20Z

0

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

answered Feb 15, 2021 at 13:56

Neil Reardon

651 silver badge9 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related