Блог

Это мой JS-код:

 Vue.component('card-stack', {
  props: ['course'],
  template: `
      <h3 class="course-card__title">
        {{ course.title }}
      </h3>
    `
})

new Vue({
  el: '#app',
  data: {
    courses: [
      { title: 'sometext' }
    ]
  }
})
  

и это мой HTML:

 <div id="app">
  <card-stack v-for="x in courses" v-bind:course="x"></card-stack>
</div>
  

Мой вопрос в том, как я могу переместить v-for в часть шаблона компонента? что-то вроде этого:

 Vue.component('card-stack', {
  props: ['list'],
  template: `
      <div v-for="course in list">
          <h3 class="course-card__title">
             {{ course.title }}
          </h3>
      </div>
    `
})
  

Это не работает, потому что в Vue 2 у вас может быть только 1 корневой HTML-элемент в шаблоне.

Поскольку у вас есть цикл, он отображает несколько элементов. Все, что вам нужно сделать, это просто обернуть ваш цикл с помощью div , чтобы был только 1 корневой элемент:

 template: `
  <div>
    <div v-for="course in list">
      <h3 class="course-card__title">
        {{ course.title }}
      </h3>
    </div>
  </div>
`
  

 <card-stack :list="list"></card-stack>