Vue js error: Property or method “smoothie” is not defined on the instance but referenced during render

0
votes

I'm working on a Vue js code and got caught up in multiple errors of the following:

[Vue warn]: Property or method "smoothie" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> at src/components/Index.vue at src/App.vue warn @ vue.esm.js?efeb:591

Second error is:

[Vue warn]: Error in render: "TypeError: Cannot read property 'title' of undefined"

found in

---> at src/components/Index.vue at src/App.vue

The file path is this:

(vue cli project name) -> src -> components -> Index.vue

The code is this: 

  <template>
    <div class="index container">
      <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>
    </div>
  </template>

  <script>
  export default {
    name: 'Index',
    data() {
      return {
        smoothies: [
          { title: 'Mexican Brew', slug: 'mexican-brew', ingredients:['bananas', 'coffee', 'milk'], id: '1'},
          { title: 'Morning Mood', slug: 'morning-mood', ingredients:['mango', 'lime', 'juice'], id: '2'}
        ]
      }
    }
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  </style>
1
vue.jsvue-cli

1 Answers

0
votes

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