Почему не получается вывести список Vue.js v-for?

Question

[Влад Скляренко]

Подскажите, что не так. Уже час бьюсь. Не выводит список, хоть убей.

<template>
    <ul id="example-1">
        <li v-for="todo in items">
            {{ todo }}
        </li>
    </ul>
</template>
<script>
    export default {
        data:{
            items: ['iPhone 7', 'Galaxy S8', 'Nokia N8', 'Xiaomi Mi6']
        },
    }
</script>
<style>
</style>

Comments

[Ярослав Иванов]

И где остальной код

[Roman K]

Ярослав Иванов, о каком остальном ты говоришь?

Answer 1

[0xD34F]

Считаете чтение документации излишним? Очень зря. Ведь иначе вы бы знали, что data должна быть функцией:

data() {
  return {
    items: ['iPhone 7', 'Galaxy S8', 'Nokia N8', 'Xiaomi Mi6'],
  };
},

Comments

[Roman K]

Таки стрелочной красивее:

data: () => ({
  items: ['iPhone 7', 'Galaxy S8', 'Nokia N8', 'Xiaomi Mi6'],
}),

[akass]

Roman Kitaev, делать data стрелочной не реккомендуется.

[Roman K]

akass, почему?

[Roman K]

akass, Ты ответишь?

[akass]

Roman Kitaev, так как стрелочная функция лишает тебя контекста, доступа к пропсам и методам в data не будет, а это часто нужно, так что в этом случае лучше писать по стайл гайду

[Roman K]

akass, хм. Никогда не было необходимости в пропсах и методах в data. Но не исключаю, что это может быть нужно. Согласен с тобой.

Answer 2

[Сергей Соколов]

Это код компонента. В компоненте свойство data обязательно должно быть функцией, т.к. иначе одни и те же данные были бы у всех инстансов этого компонента.

Чтобы код заработал, надо еще его подключить и вставить этот компонент где-то внутри элемента, с которым работает "корневой" Vue.

В простом виде для корневого компонента можно оставить data как вы написали. Посмотрите пример v-for в документации.