#Vue 初心者 - data の配列の値を表示する、v-for で展開する

NOTE

要素の順番を直接指定して値を利用できる

例: {{ posts[0].id }} (配列の1番目の要素)

v-for であればすべての要素を展開できる

v-for の :key="post.id" は特にこの例では必要ないと思うが、書かないと Lint に怒られるので書いている

Code

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>{{ posts[0].id }} {{ posts[0].title }}</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
      ]
    }
  }
}
</script>

View

Original by Github issue

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter