Блог

Я хочу обновить свой cardData массив, который получает свое значение с помощью get-запроса из базы данных после отправки post-запроса в базу данных. Я написал эту saveDraft() функцию, которая по щелчку добавляет значения в cardData массив, но мне нужно обновить страницу или щелкнуть по ней дважды, чтобы увидеть изменения. Есть ли способ сделать это динамически, не обновляя страницу?

     saveDraft() {
      Api.createComment({
          // it's a post request
        })
        .then(res => {
          if (response.status == 200) {
            Api.getComments().then(res => {
              // it's a get request to update the cardData
              if (res.status === 200) {
                this.cardData = res.data;
              } else {
                // catches error
              }
            });
          } else {
            // catches error
          }
        });
    },
  

Я не могу точно понять, как вы реализовали функцию saveDraft(), но я буду работать с тем, что вы указали!

Чтобы в целом ответить на ваш вопрос, я думаю, это зависит от того, что вы имеете в виду, дважды щелкнув по нему или обновив страницу (т. Е. «Щелчок» означает, что вы привязали его к пользовательскому событию, такому как @dblclick или @click?). Но в Vue вы можете обрабатывать динамические события с помощью следующего:

1) Есть ли эта функция в дочернем компоненте? Если да, то рассмотрите возможность использования директивы v-on для прослушивания пользовательских событий (т.Е. @dblclick , @click @mouseover и т.д.), Отправки пользовательского события watcher или создания,, которое «обновляет» данные в родительском элементе.

• Если это сбивает с толку, вы можете посмотреть видео от Vue Mastery по обработке событий, в котором рассматриваются основы передачи событий от дочернего компонента родительскому.

2) Вы можете рассмотреть возможность использования Vuex в качестве менеджера состояний. Это может помочь с реактивностью — обновлением компонента или части данных, передаваемых через мутации и действия. Ознакомьтесь с общим обзором Vuex и реактивности в Vue на Vue Mastery

Если это все еще не имеет смысла, дайте мне знать здесь или обновите свой вопрос, если это необходимо 🙂