Как я могу получить доступ к своему экземпляру vue, находясь в v-for l oop?

Question

У меня v-for l oop

<div v-for="index in 6" :key="index">
      <div class="card h-100" style="margin-top: 200px;">
        <a href="#">
          <img
            class="card-img-top"
            src="https://i.picsum.photos/id/345/700/400.jpg?hmac=oQMF95pIPaAEnln8qWEjerYF_2lcuFsfl_KnwjHnpXc"
            alt
          />
        </a>
        <div class="card-body">
          <h4 class="card-title">
            <a href="#"><p>{{ this.itemData[index].name }}</p></a>
          </h4>
          <p
            class="card-text"
          >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p>
        </div>
        <div class="card-footer">
          <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
        </div>
      </div>
    </div>
  </div>
</div>

Я получаю следующую ошибку:

TypeError: Cannot read property 'itemData' of undefined

Однако я могу ссылаться на эту же строку кода за пределами l oop, и это будет отображаться. У меня также возникают проблемы, когда я запускаю this.itemData [0] .price, где цена присутствует в объекте itemData [0]. Любая помощь приветствуется!

Answer 1

Ошибка TypeError: Cannot read property 'itemData' of undefined возникает из-за того, что вы используете префикс this. в шаблоне, что не рекомендуется.

Я даже обнаружил, что есть правило для этого в официальном плагине ESLint для vue: https://eslint.vuejs.org/rules/this-in-template.html

Надеюсь, это поможет!

Answer 2

Соответствующий CodePen

v-for="index in 6" будет начинаться с 1: 1, 2, 3, 4, 5, 6.

Но массивы начинаются с 0 .

Если ваш массив содержит 6 элементов, это не удастся, потому что itemData[6] не существует. На самом деле, если бы это не произошло, он все равно пропустил бы первый элемент в массиве, itemData[0].

В вашем шаблоне измените привязку на:

{{ itemData[index - 1].name }}