Vue js错误：属性或方法“smoothie”未在实例上定义，但在渲染期间引用

Question

我正在编写 Vue js 代码，并遇到以下多个错误：

[Vue 警告]：属性或方法“smoothie”未在 实例，但在渲染期间引用。确保该属性是 反应式，无论是在数据选项中，还是对于基于类的组件，通过 初始化属性。看： https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

发现于

---> 在 src/components/Index.vue 在 src/App.vue 警告@vue.esm.js?efeb:591

第二个错误是：

[Vue 警告]：渲染错误：“TypeError：无法读取属性 'title' 未定义”

发现于

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

文件路径是这样的：

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

代码是这样的：

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

Answer 1

无法读取该属性，因为您立即关闭了 <div>。

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

这就是为什么它不知道如何处理 Smoothie 属性，因为它在下面的部分中未定义。

它应该看起来像这样工作：

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