Question

我正在处理Vue js代码，并陷入以下多个错误：

[Vue警告]：属性或方法“ smoothie”未在   实例，但在渲染过程中被引用。确保此属性是   在data选项中或对于基于类的组件，通过   初始化属性。看到：   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>

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

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

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

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

1 个答案: