Skip to content

Instantly share code, notes, and snippets.

@daviwesley
Created November 9, 2019 19:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save daviwesley/3a4d68200ed1ea28212798296cf2b599 to your computer and use it in GitHub Desktop.
Save daviwesley/3a4d68200ed1ea28212798296cf2b599 to your computer and use it in GitHub Desktop.
// coloca isso no App.vue em methods
createChapter(bookId, data) {
this.$http
.post(`/books/${bookId}/chapters`, { data })
.then(() => this.capitulos.push(data))
.catch(e => console.log("Erro ao criar capitulo", e));
},
editChapter(bookId, chapterId, data) {
api
.put(`/books/${bookId}/chapters/${chapterId}`, { data })
.then(() => {
const objIndex = this.capitulos.findIndex(
obj => obj._id === chapterId
);
const updatedObj = { ...this.capitulos[objIndex], ...data };
const updatedChapters = [
...this.capitulos.slice(0, objIndex),
updatedObj,
...this.capitulos.slice(objIndex + 1)
];
this.capitulos = updatedChapters;
})
.catch(e => console.log("erro ao editar capitulo", e));
},
getChapter(bookId) {
this.$http
.get(`/books/${id_book}/chapters`)
.then(res => this.capitulos.push(res.data));
},
getAllChapters() {
this.capitulos.map(chapter => {
this.getChapter(chapter._id);
});
},
// Coloca isso no component/EditarCapitulo.vue
<template>
<div>
<h1>{{chapters.conteudo}}</h1>
<button v-on:click="visible = !visible">Editar capitulo</button>
<button>remover capítulo</button>
<div v-if="visible">
<form>
<input type="text" name="conteudo" v-model="content" id="content" />
<button v-on:click="editChapter(bookId, chapters._id, content)">Salvar</button>
</form>
</div>
</div>
</template>
<script>
export default {
name: "EditarCap",
data: () => ({
visible: false,
content: ""
}),
props: {
bookId: Number,
chapters: Object,
saveChapter: Function,
updateChapter: Function
},
methods: {
createChapter(bookId, data) {
this.saveChapter(bookI, data);
},
editChapter(bookId, chapterId, data) {
this.updateChapter(bookId, chapterId, data);
}
}
};
</script>
// fim component/EditarCapitulo.vue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment