2

Здравствуйте!

Не работает v-for от vue.js 2

<div id="app" v-for="user in users" >\{{user.userName}}</div>

let app = new Vue({
   el: "#app",
      data: {
         users: [
            {userName: "A"},
            {userName: "B"},
            {userName: "C"},
         ]
      }
});

Выводит просто пустую строку

введите сюда описание изображения

А в jsfiddle выводит ошибку:

введите сюда описание изображения

1 ответ 1

8

Вы корневой ноде id="app" пытаетесь v-for сделать, т.е. создать несколько экземпляров, она должна быть одна. Сделайте вот так:

<div id="app">
  <div v-for="user in users">
    {{user.userName}}
  </div>
</div>

Ниже пример с компонентом (ответ на комментарий):

Vue.component('user-card', {
  data: () => {
    return {
      users: [{
        username: "A"
      }, {
        username: "B"
      }]
    }
  },
  template: '<div><div v-for="user in users">\{{user.username}}</div></div'
})

new Vue({
  el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>

<div id="app">
  <user-card></user-card>
</div>

6
  • а через template как сделать?)
    – Tvolex
    4 июл 2017 в 7:28
  • Имеется ввиду псевдоэлемент <template>? Также: <template v-for="user in users"> {{user.userName}} </template> 4 июл 2017 в 8:37
  • я не правильно задал вопрос) Имеется виду через Vue.component('user-card', { data: () => { return { users: [ {username: "A"}, {username: "B", ] } }, template: '<div><div v-for="user in users">\{{user.username}}</div></div' }) Вот так, но если далее просто вставить селектор user-card, то опять же ничего не происходит(
    – Tvolex
    4 июл 2017 в 8:43
  • 1
    Добавил пример в ответ. В комментарии выше вы зарегистрировали vue компонент, но также необходимо создать vue экземпляр и задать элемент, к которому он будет привязан. 4 июл 2017 в 9:38
  • 1
    Для примера хорошо, но компоненты лучше в отдельном месте создавать... 4 июл 2017 в 12:32

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.