Как передать реквизиты дочернему компоненту, который отображается в v-for в VueJS

Question

У меня есть следующий Vue компонент

export default {
    components: {
      DimensionedImage
    },
    props: [
      'site'
    ]
  }

, где site является объектом:

{
  title: '',
  imageUrls: [],
  hostname: ''
}

Функция рендеринга для этого компонента выглядит следующим образом:

<article>
  <header>
    <h1>{{this.site.title}}</h1>
  </header>
  <div class="images-container">
    <template v-for="imageUrl in this.site.imageUrls">
      <DimensionedImage :key="imageUrl" :url="imageUrl" :hostname="this.site.hostname"/>
    </template>
  </div>
</article>

Как видите, я хочу передать hostname из site реквизита в DimensionedImage компонент, но Vue постоянно говорит мне, что this не определено.

Может кто-нибудь сказать мне, что здесь происходит за кулисами, почему this теряет свой контекст? И затем, как я могу на самом деле исправить код так, чтобы я мог передать hostname из this.site в дочерний компонент?

Answer 1

При рендеринге переменных данных в шаблоне вам не нужно использовать экземпляр this при доступе к свойству.

<article>
  <header>
    <h1>{{site.title}}</h1>
  </header>
  <div class="images-container">
    <template v-for="imageUrl in site.imageUrls">
      <DimensionedImage :key="imageUrl" :url="imageUrl" :hostname="site.hostname"/>
    </template>
  </div>
</article>

вы можете go - vue рендеринг здесь .