Trying to inline edit an article and submit the values - vuejs2

Question

I'm trying to inline edit an article and submit the values from the form. However, the v-model values are empty on submit.
Check out my code below. So the top form is for new articles only. And in my v-for there's a switch between 'view' and 'edit' mode.
<template>
<div>
<h2>Articles</h2>
<hr />
<form class="mb-3" #submit.prevent="addArticle">
<div class="form-group">
<input class="form-control" placeholder="Title" v-model="article.title" />
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Bodytext" v-model="article.body"></textarea>
</div>
<button type="submit" class="btn btn-light btn-block">Add new</button>
</form>
<hr />
<div class="card card-body mb-2" v-for="article in articles" v-bind:key="article.id">
<template class="article-row" v-if="edit === article.id">
<form #submit.prevent="editArticle">
<div class="form-group">
<input class="form-control" placeholder="Title" v-model="article.title" />
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Bodytext" v-model="article.body"></textarea>
</div>
<!-- <input type="hidden" v-model="article.id" /> -->
<button type="submit" class="btn btn-light btn-block">Update</button>
</form>
</template>
<template v-else>
<h3>{{ article.title }}</h3>
<p v-html="article.body"></p>
<hr />
<div>
<button #click="toggleEditMode(article.id)" class="btn btn-warning">Edit</button>
<button #click="deleteArticle(article.id)" class="btn btn-danger">Delete</button>
</div>
</template>
</div>
</div>
</template>
<script>
export default {
data() {
return {
articles: [],
article: {
id: "",
title: "",
body: ""
},
article_id: "",
edit: false
};
},
created() {
this.fetchArticles();
},
methods: {
fetchArticles(page_url) {
let vm = this;
page_url = page_url || "/api/articles";
fetch(page_url)
.then(res => res.json())
.then(res => {
this.articles = res.data;
vm.makePagination(res.meta, res.links);
})
.catch(err => console.log(err));
},
addArticle() {
console.log(JSON.stringify(this.article));
fetch("/api/article", {
method: "post",
body: JSON.stringify(this.article),
headers: {
"content-type": "application/json"
}
})
.then(res => res.json())
.then(data => {
this.article.title = "";
this.article.body = "";
alert("Article added!", "success");
this.fetchArticles();
})
.catch(err => console.log(err));
},
editArticle() {
console.log(JSON.stringify(this.article));
fetch("/api/article", {
method: "put",
body: JSON.stringify(this.article),
headers: {
"content-type": "application/json"
}
})
.then(res => res.json())
.then(data => {
alert("Article updated!", "success");
this.fetchArticles();
})
.catch(err => console.log(err));
},
toggleEditMode(article_id) {
this.edit = article_id;
}
}
};
</script>
The console.log(JSON.stringify(this.article)); on the first line of the editArticle function returns an empty object (the default value)... What am i doing wrong?

Answer 1

You need to set the article befeore trying to update it like that:
toggleEditMode(article_id) {
for (let index = 0; index < this.articles.length; index++) {
const article = this.articles[index];
if(article.id === article_id){
this.article = article;
break;
}
}
this.edit = article_id;
}
Fiddle