[Vuejs]-Vue.js 3 Uncaught (in promise) TypeError: Cannot convert undefined or null to object

by

0👍

Just add a condition that not to render the loop until data is not set. The data from API end point is not available on the initial dom rendered and there is not data in all_trash.data hence the error. Just add a v-if on top of the div and hopefully it should work.

<div v-if=" all_trash.data"> 
 <div v-for="(trash, index) in all_trash.data" :key="index">
      <div class="card rounded shadow mb-3">
        <div class="card-body">
          <div class="mx-3">
            <h5 class="mb-4">{{ trash.garbage.name }}</h5>
            <p>
              {{ trash.categories.name }}
              <span class="float-end">
                <button class="btn" style="color: red">Hapus</button>
              </span>
            </p>
          </div>
        </div>
      </div>
</div>

Leave a comment