Vue обновление данных на странице

Question

Имеется небольшой проект на Vue Cli + Flask. Ситуация такая. с Vue я через axios отправляю запрос на бэк в бд и мне возвращается ответ как у всех как и везде. В ответе приходит json, есть ключ значение которого говорит, что есть ли запись такая в бд или нет. Так вот, все проходит отлично, первый раз когда нажимаешь на кнопку, отрабатывает метод и это значение выводится на страницу, мол "такая запись в бд есть". Я изменяю данные, чтобы уж точно не было похожих записей, отправляю повторно запрос на бэк, данные приходят, что такой записи нет, в консоли выводится, все отлично, но вот на странице ничего не меняется, надпись "такая запись в бд есть" не меняется, на "такой записи в бд нет". Как все-таки делать, чтобы после promis данные обновлялись на странице, не понимаю я как запустить обновление виртуального DOM.

new Vue({
  el: '#app',
  data: function() {
    return {
      formDataAddPrinter: {
        name: '',
        note: '',
        vendorCode: ''
      },
      updateDate: false,
      msg: '',
      resMsg: ''
    }
  },
  methods: {
    sendDataAddPrinter: function() {
      const self = this
      this.axios.post('http://192.168.0.197:5000/api/add/printer', {
          formData: this.formDataAddPrinter
        })
        .then(function(res) {
          console.log(res.data.msg)
          self.resMsg = res.data.msg
          self.updateDate = true
        })
        .catch(function(err) {
          console.log(err)
        })
        .finally(() => {
          self.updateDate = true
          console.log(self.updateDate)
          console.log(self.resMsg)
        })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="container-printer">
  <div class="container-form-add-printer">
    <div class="static" v-bind:class="{'msg-add-printer': updateDate}">{{ resMsg }}</div>
    <div class="form-add-printer">
      <div class="label-param name-printer">
        <label for="name-printer">Название принтера</label>
        <input type="text" id="name-printer" v-model="formDataAddPrinter.name">
      </div>
      <div class="label-param note-printer">
        <label for="note-printer">Примечание к принтеру</label>
        <textarea type="text" id="note-printer" v-model="formDataAddPrinter.note"> </textarea>
      </div>
      <div class="label-param vendor-code-printer">
        <label for="vendor-code-printer">Артикул</label>
        <input type="text" id="vendor-code-printer" v-model="formDataAddPrinter.vendorCode">
      </div>
      <input type="submit" class="btn add-btn" value="Добавить" v-on:click="sendDataAddPrinter">
    </div>
  </div>
</div>

Answer 1

Вместо:

self.resMsg = res.data.msg

Должно быть:

this.resMsg = res.data.msg

Вы перепутали this с self

БЛОГ НА HUSL

Vue обновление данных на странице

Ответы (1 шт):