My page reloads, and the added task wont register

Question

I am creating a to do list for my exam. For some reason the page keep reload when I click add task, and the tasks wont register. I am new to Vue.js and Javascript. I have problems with finding the issue. It is a simple code, not to complex, but the add task part is not working.

Here is my code:

<template >
  <section class="todolist">
   <h1 class="title">{{ title }}</h1>
    <form class="container">
        <h3 class="container__title">New Task </h3>
        <input class="container__input" type="text" placeholder="Enter task" v-model="task">
        <button class="container__button" @click="addPlanningTask">Add Task</button>
        <h3 class="container__title-second">To Do List</h3>
        <ul>
            <li v-for="(task, index) in tasks" :key="index">
             <span>{{ task.name }} </span>
             <button class="todolist__button" @click="deletePlanningTask">Remove</button>
            </li>
       </ul>
         <h4 class="container__list-title" v-if="task.length === 0">
             List is empty!</h4>
    </form>
    
    </section>
      <div class="guestlist">
        <h4 class="guestlist__title">{{ invited }}</h4>
        <span>{{ guestList }}</span>
        <button class="guestlist__button" @click="toggleGuestList">Guestlist</button>
      <div v-if="isGuestListVisible === true">
       <ul>
        <li v-for="guest in people" :key="guest.id.value">
            {{ guest.name.first }} {{ guest.name.last }}</li>
      </ul>
      </div>
     </div>
</template>

Answer 1

export default {
    props: {
            titleName: {
                type: String,
                default: 'todolist',
            },
    },
data() {
            return {
                title: 'Planning the party!',
                task: '',
                tasks: [{
                    name: ''
                }],
                invited: 'Who is invited?',
                guestList: '',
                people: [],
                name: '',
                isGuestListVisible: false
                
            }
        },
        created() {
            this.addGuest();
        },
    
        methods: {
            async addGuest() {
                const url = 'https://randomuser.me/api/?page=2&results=8';
                const res = await fetch(url);
                const { results }   = await res.json();
                this.people = results;
                
            },
             toggleGuestList() {
                this.isGuestListVisible = !this.isGuestListVisible;
             },
             addPlanningTask() {
            if(this.task.length === 0)
              return;
    
             this.tasks.push({
             name: this.task
             });
         },
    
        deletePlanningTask(index) {
        this.tasks.splice(index, 1);
        },
        },
      };    
    </script>
    
        

Answer 2

You can use @submit.prevent on form if you don't want to reload page:

new Vue({
  el: "#demo",
  props: {
    titleName: {
      type: String,
      default: 'todolist',
    },
  },
  data() {
    return {
      title: 'Planning the party!',
      task: '',
      tasks: [],
      invited: 'Who is invited?',
      guestList: '',
      people: [],
      name: '',
      isGuestListVisible: false
    }
  },
  created() {
    this.addGuest();
  },
  methods: {
    async addGuest() {
      const url = 'https://randomuser.me/api/?page=2&results=8';
      const res = await fetch(url);
      const { results }   = await res.json();
      this.people = results;
    },
    toggleGuestList() {
      this.isGuestListVisible = !this.isGuestListVisible;
    },
    addPlanningTask() {
      if (this.task.length === 0) return;
      this.tasks.push({ name: this.task });
    },
    deletePlanningTask(index) {
      this.tasks.splice(index, 1);
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" >
  <section class="todolist">
    <h1 class="title">{{ title }}</h1>
    <form class="container" @submit.prevent>
      <h3 class="container__title">New Task </h3>
      <input class="container__input" type="text" placeholder="Enter task" v-model="task">
      <button class="container__button" @click="addPlanningTask">Add Task</button>
      <h3 class="container__title-second">To Do List</h3>
      <ul>
        <li v-for="(task, index) in tasks" :key="index">
           <span>{{ task.name }} </span>
           <button class="todolist__button" @click="deletePlanningTask">Remove</button>
        </li>
     </ul>
     <h4 class="container__list-title" v-if="task.length === 0">List is empty!</h4>
    </form>
  </section>
  <div class="guestlist">
    <h4 class="guestlist__title">{{ invited }}</h4>
    <span>{{ guestList }}</span>
    <button class="guestlist__button" @click="toggleGuestList">Guestlist</button>
    <div v-if="isGuestListVisible === true">
      <ul>
        <li v-for="guest in people" :key="guest.id.value">
        {{ guest.name.first }} {{ guest.name.last }}</li>
      </ul>
    </div>
  </div>
</div>