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

Posted 2023-02-23

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

【英文标题】：Vue js error: Property or method "smoothie" is not defined on the instance but referenced during render

【发布时间】：2019-05-05 21:50:54

【问题描述】：

我正在编写 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>

【参考方案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> <---------

【讨论】：

非常感谢！什么错字。几乎就像缺少分号的错误一样。再次感谢@Badgy