Unable to display data from api calls using v-for

October 7, 2022

I want to display in a v-for list every categories of the https://www.themealdb.com/api/json/v1/1/categories.php API.

When i do {{ categories }} i do have every info displayed but when i do {{ categories.strCategory }} i have a blank li.

here is my code

<ul class="categorie-list">
            <li v-for="(categories, index) in categories" :key="index">
              {{ categories.strCategory }}
            </li>
          </ul>

mounted() {
    this.getAllCategories()
  },
  data() {
    return {
      categories: []
    }
  },
  methods: {
    getAllCategories() {
      axios
        .get('https://www.themealdb.com/api/json/v1/1/categories.php')
        .then((response) => {
          console.log( response.data);
          this.categories = response.data;  
        }).catch(error => {
          console.log(error);
        })
    },

i also get this alert in the console

[Vue warn]: Property "searchQuery" was accessed during render but is not defined on instance. 
  at <MainPage onVnodeUnmounted=fn<onVnodeUnmounted>

>Solution :

I got your point.

in Response you are getting array of object which has only one object so you need to assign response categories to local variable as per below mention.

working URL – https://stackblitz.com/edit/vue-gzxbkv?file=src/App.vue

 methods: {
  getAllCategories() {
  axios
    .get('https://www.themealdb.com/api/json/v1/1/categories.php')
    .then((response) => {
      console.log(response.data.categories);

      //before
      //this.categories = response.data;
      //after
      this.categories = response.data.categories;
    })
    .catch((error) => {
      console.log(error);
    });
 },
},