> For the complete documentation index, see [llms.txt](https://learnmagento.gitbook.io/vuejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learnmagento.gitbook.io/vuejs/list-rendering-ok.md).

# List Rendering (ok)

https\://www\.sitepoint.com/vue-3-beginner-guide/

> Chú ý: Sử dụng thuộc tính :key="task.id" cho vòng lặp như bên dưới.

![](https://2312674349-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeXbfPqPP3ZSJVavefR%2F-MiDBmSJbllsl0lYwgi6%2F-MiDCu4W8AOzntW2re8w%2FScreenshot_1.png?alt=media\&token=1b31d043-398f-4412-aeb4-a6d7efa3a541)

```
<template>
  <ul>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{task.id}}. {{ task.name }}
      </li>
    </ul>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      title: 'My To Do App',
      tasks: [
        { id: 1, name: 'Learn Vue JS', finished: false },
        { id: 2, name: 'Build a Vue application', finished: false },
        { id: 3, name: 'Write an article about Vue JS', finished: false }
      ]
    }
  }
}
</script>
```