Unable to display data from api calls using v-for-CodePudding

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

CodePudding user response：

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

CodePudding user response：

Not sure if you tried this:

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