Vue js error: свойство или метод "smoothie" не определены в экземпляре, но имеются ссылки во время рендеринга - PullRequest
Новая
       8

Vue js error: свойство или метод "smoothie" не определены в экземпляре, но имеются ссылки во время рендеринга

0 голосов
/ 04 декабря 2018

Я работаю над кодом Vue js и попался в нескольких ошибках:

[Предупреждение Vue]: свойство или метод "smoothie" не определены в экземпляре, носсылка во время рендера.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.См .: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

найдено в

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

Вторая ошибка:

[Vue warn]: Ошибка при рендеринге: «Ошибка типа: невозможно прочитать свойство 'title' undefined"

найдено в

---> в 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 Ответ

0 голосов
/ 04 декабря 2018

Свойство не может быть прочитано, поскольку вы мгновенно закрыли <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> <---------
...