[Vuejs]-Vue js error: Property or method "smoothie" is not defined on the instance but referenced during render

by

0👍

✅

The property cant be readed because you closed your <div> instantly.

 <div class="card" v-for="smoothie in smoothies" :key="smoothie.id"></div> <------
  <div class="card-content">
    <h2 class="indigo-text">{{ smoothie.title }}</h2>
    <ul class="ingredients">
      <li v-for="(ing,index) in smoothie.ingredients" :key="index">
        <span class="chip">{{ ing }}</span>
      </li>
    </ul>
  </div>

Thats why it doesn´t know what to do with the smoothie property since its undefined on the parts below.

It should look like this to work:

 <div class="card" v-for="smoothie in smoothies" :key="smoothie.id">
  <div class="card-content">
    <h2 class="indigo-text">{{ smoothie.title }}</h2>
    <ul class="ingredients">
      <li v-for="(ing,index) in smoothie.ingredients" :key="index">
        <span class="chip">{{ ing }}</span>
      </li>
    </ul>
  </div>
 </div> <---------

Leave a comment