1

Имеется одностраничник с мини-блогом (посты генерируются динамически), хочу сделать редактирование постов через модальное окно. Передаю в компонент объект с данными. Подскажите, пожалуйста, как из компонента (модальное окно) вернуть измененные в 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">&times;</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)
      },
    }
});

1 ответ 1

1

Обычно данные передаются наверх (в parent component) двумя основными путями:

  1. Общее хранилище в виде vuex, где 1 компонент берет данные и делает что угодно с ними и все остальные компоненты имеют возможность получить доступ к этим данным.

  2. Второй вариант это использование .emit для передачи событий наверх, выглядеть это может так в родительском компоненте мы подписываемся на определенное событие:

created: function() {
  this.$on('savepost', function(value) {
    console.log(value);
  });
}

а в дочернем компоненте используем emit для вызова этого события

this.$emit('savepost', this.post);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.