1

Необходимо перерисовать компонент после события отправки формы. Как вызвать перерисовку?

<!-- Modal -->
        <div class="modal h">
            <div class="close_area" @click="modal_close"></div>
            <div class="formContainer">
                <!-- Add New Post -->
                <form action="" @submit.prevent="handleSubmit">
                    <button type="button" class="close" @click="modal_close">+</button>
                    <label>
                        Название записи
                        <input
                            type="text"
                            placeholder="Введите название записи"
                            v-model="headline"
                            :class="{invalid: ($v.headline.$dirty && !$v.headline.required)}"
                        >
                        <small
                            v-if="$v.headline.$dirty && !$v.headline.required"
                        >
                            headline не должен быть пустым
                        </small>
                    </label>
                    <label>
                        Текст записи
                        <textarea
                            cols="10"
                            rows="10"
                            placeholder="Введите тест записи"
                            v-model="posttext"
                            :class="{invalid: ($v.posttext.$dirty && !$v.posttext.required)}"
                        >
                        </textarea>
                        <small
                            v-if="$v.posttext.$dirty && !$v.posttext.required"
                        >
                            posttext не должен быть пустым
                        </small>
                    </label>
                    <button type="submit" class="btn">Добавить запись</button>
                </form>
                <!-- / Add New Post -->
            </div>
        </div>
        <!-- / Modal -->

Вот метод

 async handleSubmit() {
                    if (this.$v.$invalid) {
                        this.$v.$touch();
                        return
                    }

                    try {
                        await this.$store.dispatch('createRecord', {
                            headline: this.headline,
                            posttext: this.posttext,
                            date: new Date().toJSON()
                        });
                        console.log('Записано!');
                        this.$v.$reset();
                        this.headline = '';
                        this.posttext = '';
                        this.modal_close();

                    } catch (e) {
                        console.log('ERROR')
                    }
                    console.log('Отправка')
                },
9
  • this.$forceUpdate() не помогает?
    – Dmytro
    29 окт 2019 в 7:58
  • Спасибо за ответ, но не сработало. 29 окт 2019 в 10:54
  • 1) Зачем это надо? Даже в доке написано, что если вы пытаетесь вручную обновить компонент, то 99%, что вы делаете что-то не правильно 2) А как Вы это определили, что компонент не обновился?
    – Dmytro
    29 окт 2019 в 10:56
  • У меня есть форма которая доабвляет посты в приложение(Назовем это новости) мне нужно сделать так чтобы при добавлении довости она отображалась на текущей странице, по этому нужно перерисовать компонент откуда они подтягиваются 29 окт 2019 в 11:01
  • Не нужно перерисовывать. Добавьте новость в массив, в котором у Вас содержаться другие новости - и Vue сам все перерисует
    – Dmytro
    29 окт 2019 в 11:57

1 ответ 1

2

Пример кода добавления новости:

const NewsItem = Vue.component('news-item', {
  template: `<li> {{news}}</li>`,
  props: ['news']
});

const app = new Vue({
  el: '#app',
  components: { NewsItem },
  data() {
    return {
      newsList: ['Новость №1', 'Новость №2'],
    };
  },
  methods: {
    sendNews(event, news = `Новость №${this.newsList.length +1}`) {
      // ... здесь код отправляющий новсть на сервер
      this.newsList.push(news)
    }
  },
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

<div id="app">
  <ul>
  <news-item v-for="news in newsList" :news="news" :key="news" />
  </ul>
  <button @click="sendNews($event)">Отправить новость</button>
</div>

Пример кода с принудительным обновлением

const NewsItem = Vue.component('news-item', {
  template: `<li> {{news}}</li>`,
  props: ['news'],
});

const app = new Vue({
  el: '#app',
  components: { NewsItem },
  data() {
    return {
      newsList: ['Новость №1', 'Новость №2'],
      isShow: true,
    };
  },
  methods: {
    reloadComponentForce() {
      this.$forceUpdate();
    },
    reloadManual() {
      this.isShow = false;
      this.$nextTick(() => {
        this.isShow = true;
      });
    },
  },
  updated() {
    console.log('updated');
  },
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

<div id="app">
  <ul>
  <news-item v-for="news in newsList" :news="news" :key="news" v-if="isShow" />
  </ul>
  <button @click="reloadComponentForce">Перегрузить с $forceUpdated</button>
  <button @click="reloadManual">Перегрузить вручную</button>
</div>

8
  • У меня немного другая структура, я использую Vue CLI И у меня на Странице вывод новостей подружаеться из компонента 29 окт 2019 в 12:39
  • Сначала идет форма а потом <PostsEdit/> В компоненте Пост едит уже и выводятся посты и его и нужно перерисовать 29 окт 2019 в 12:40
  • добавил примеры. Но 99% - вы что-то делает не правильно
    – Dmytro
    29 окт 2019 в 12:52
  • Возможно просто я не совсем понимаю что нужно сделать, мне нужно чтобы пост отобразился на странице когда его добавили, я думаю значит нужно дернуть компонент который их отображает 29 окт 2019 в 13:50
  • Не правильно думаете. Добавьте рабочий пример, тогда Вам смогут помочь
    – Dmytro
    29 окт 2019 в 13:55

Ваш ответ

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

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