Displaying data from api VueJS

Question

I'm fetching data from api using axios, when I console.log(app.books) I can see my data but it won't display on the page. I'm using v-for to display the data on a table. I'm confused what went wrong in my code?

<tbody>
  <tr v-for="book in books" class="text-center">
    <td> {{ book.id }} </td>
    <td><a href="#"> {{ book.name }} </a></td>
    <td> {{ book.author }} </td>
    <td> ${{ book.price}} </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"></i>  
      </a>
    </td>
  </tr>
</tbody>

export default {
  name: "App",
  data: function() {
    return {
      successMsg: false,
      errorMsg: false,
      showAddModal: false,
      showEditModal: false,
      showDeleteModal: false,
      books: [],
      newBook: {name: "", author: "", price: ""},
      currentBook: {}
    }
  },
  mounted: function(){
    this.getAllBooks();
  },
  methods: {
    getAllBooks: function(){
      axios.get('http://localhost/crud-vuejs/src/Backend/api.php?action=read')
     .then(function(res) {
        if(res.data.error){
          app.errorMsg = res.data.message;
        }
        else{
          app.books = res.data.books;
        }
        console.log(app.books);
     });
    }
  }
}

Response Payload:

{"books":[{"id":"1","name":"Harry Potter","author":"J. K. Rowling","price":"40"},{"id":"2","name":"The great gastby","author":"Scott Fitzgerald","price":"36"},{"id":"3","name":"To Kill a Mockingbird","author":"Harper Lee","price":"26"}]}

BTL · Accepted Answer · 2020-05-12 12:23:05Z

1

You should replace app with this

export default {
  name: "App",
  data: function() {
    return {
      successMsg: false,
      errorMsg: false,
      showAddModal: false,
      showEditModal: false,
      showDeleteModal: false,
      books: [],
      newBook: {name: "", author: "", price: ""},
      currentBook: {}
    }
  },
  mounted: function(){
    this.getAllBooks();
  },
  methods: {
    getAllBooks: function(){
      axios.get('http://localhost/crud-vuejs/src/Backend/api.php?action=read')
     .then((res) => {
        if(res.data.error){
          this.errorMsg = res.data.message;
        }
        else{
          this.books = res.data.books;
        }
        console.log(this.books);
     });
    }
  }
}

edited May 12, 2020 at 12:23

answered May 12, 2020 at 11:40

BTL

4,7243 gold badges28 silver badges37 bronze badges

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

3 Comments

Mohamed sadok yahyaoui Over a year ago

i did replace it but then i got an error " this is undefined "

BTL Over a year ago

Yes you are right. I updated the answer. In the then promise block you were creating a new local function scope. I replaced it with a fat arrow function and now it should work. (res) => { ... }

Mohamed sadok yahyaoui Over a year ago

so it's all about the arrow function

Collectives™ on Stack Overflow

Displaying data from api VueJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related