Имеется одностраничник с мини-блогом (посты генерируются динамически), хочу сделать редактирование постов через модальное окно. Передаю в компонент объект с данными. Подскажите, пожалуйста, как из компонента (модальное окно) вернуть измененные в input`ах данные в приложение и реактивно их подгрузить?
<editmodal :post="post"></editmodal>
<hr>
<div class="row card-columns">
<div class="col-4 card mb-3 d-flex" v-for="(post, index) in posts"
:key="index"
:post="post"
:index="index">
<img src="http://placehold.it/300x150" class="card-img-top">
<div class="card-body">
<h3 class="card-title">{{ post.title }}</h3>
<p class="card-text">{{ post.shortText }}</p>
<div class="btn-group" role="group" aria-label="btn">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#readPost" v-on:click="readPost(post)">Read More</button>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#editPost" v-on:click="editPost(post, index)">Edit</button>
<button type="button" class="btn btn-danger" v-on:click="deletePost(post)">Delete</button>
</div>
</div>
<div class="card-footer">
<small class="text-muted">0 comment</small>
</div>
</div>
</div>
Vue.component('editmodal', {
props: ["post"],
template: `<div class="modal fade" id="editPost" tabindex="-1" role="dialog" aria-labelledby="editPostTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editPostTitle">Edit post</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="title" class="col-form-label">Title:</label>
<input type="text" class="form-control" id="title" spellcheck="true" v-model="post.title">
<div class="form-group">
<label for="shortText" class="col-form-label">Short Text:</label>
<input type="text" class="form-control" id="shortText" spellcheck="true" v-model="post.shortText">
</div>
<div class="form-group">
<label for="fullText" class="col-form-label">Full Text:</label>
<textarea class="form-control" id="fullText" spellcheck="true" v-model="post.fullText"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="saveEdit(post)">Save changes</button>
</div>
</div>
</div>
</div>`,
methods: {
saveEdit: function (post) {
this.post = {
'id': post.id,
'title': post.title,
'shortText': post.shortText,
'fullText': post.fullText
}
},
},
});
new Vue({
el: '#app',
data () {
return {
header: 'Blog App',
post: {},
newPost: {},
readingPost: {},
posts: [
{
id: 1,
title: 'Title 1',
shortText: 'some short-text 1',
fullText: 'some full-text 1'
{
id: 2,
title: 'Title 2',
shortText: 'some short-text 2',
fullText: 'some full-text 2' },
{
id: 3,
title: 'Title 3',
shortText: 'some short-text 3',
fullText: 'some full-text 3' },
{
id: 4,
title: 'Title 4',
shortText: 'some short-text 4',
fullText: 'some full-text 4' },
]
}
},
methods: {
editPost: function (post, index) {
this.post = {
'id': post.id,
'title': post.title,
'shortText': post.shortText,
'fullText': post.fullText
}
},
saveEdit: function(post) {
this.post = post;
return post;
console.log(post)
},
}
});