I'm currently in the process of creating a new task.
I was expecting the result to be 'created task with title', but the title is empty because 'formData' is still reactive.
Below is an example of the code:
// index.vue
<form class="form" @submit.prevent="createTask()">
<label class="form__label">
Title:
<input
type="text"
class="form__input"
v-model="formData.title"
placeholder="Title"
required
/>
</label>
<button type="submit" class="form__button">Create</button>
</form>
...
export default class App extends Vue {
formData = {
title: "",
completed: false,
};
createTask(): void {
store.commit("task/SET_TASK", this.formData);
this.formData.title = "";
}
}
// Task.ts (vuex)
export default class Task extends VuexModule {
tasks = [
{
title: "Example task",
completed: false,
},
];
@Mutation
SET_TASK(payload: TaskInterface) {
this.tasks.push(payload);
}
}
Can you help me identify what I might be doing wrong?