> 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/methods-ok.md).

# Methods (ok)

![](https://2312674349-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeXbfPqPP3ZSJVavefR%2F-MiDG5zXra9qIVoFt4PL%2F-MiDIDxfpcy0DsPou5At%2FScreenshot_5.png?alt=media\&token=a9be9e38-1b6d-4ff3-83cf-b2dd73b91d9a)

C:\xampp\htdocs\html\src\App.vue

```
<template>
  <ul>
    <h2>{{title}}</h2>
    <div>
      <input type="text" v-model="newTask" placeholder="Add a new task" >
      <button @click="addTask" :disabled="newTask.length < 1">Add task</button>
    </div>
    <div v-if="newTask.length > 0">
      <h3>New task preview</h3>
      <p>{{ newTask }}</p>
    </div>
    <li v-for="task in tasks" :key="task.id">
      {{task.id}}. {{ task.name }}
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      title: 'My To Do App',
      newTask: '',
      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 }
      ]
    }
  },
  methods: {
    addTask() {
      if (this.newTask.length < 1) return;
      this.tasks.push({
        id: this.tasks.length + 1,
        name: this.newTask,
        finished: false
      });
      this.newTask = '';
    }
  }
}
</script>
```