After commit, variable is still reactive
I'm trying to commit a new task.
The expected result should be 'created task with title' but the title is empty because 'formData' is still reactive.
Here is code example:
// 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);
}
}
What I'm doing wrong?
Updated 2022-01-14 13:09:23Z by
s78
Tags:
vue typescriptvue typescript examplevue typescript tutorialvue typescript datavue typescript refsvue typescript computedvue typescript eslintvue typescript class componentvue typescript interfacevue typescript watchvue.jsvue.js tutorialvue.js vs reactvue.js devtoolsvue.js not detectedvue.js examplesvue.js vs angularvue.js watchvue.js propsvue.js interview questionsvuexvuex gettersvuex storevuex actionsvuex mapstatevuexyvuex mutationsvuex modulesvuex typescriptvuex 4vuex 4 typescriptvuex 4 modulesvuex 4 watchvuex 4 gettersvuex 4 tutorialvuex mapactionsvuex 4 typescript modulesvuex usestore