CODEWITHSUNDEEP
vue.js
unyeol
unyeol

Reputation: 57

I want to know about vue asynchronous update

I want to output the data obtained from the server to the screen as an asynchronous update.

There is no default value, but I want to print it when it is different from the new one.

 methods: {
      message : function(){
      },
      updateMessage: function () {
          const path = 'http://localhost:5000/process';
          axios.get(path)
              .then((res) => {
                  this.msg = res.data;
              })
              .catch((error) => {
                  // eslint-disable-next-line
                  console.error(error);
              });
      },
  },
    created() {
    this.message();
    this.$nextTick();
    this.$forceUpdate();
  }
};

There is no reaction.

Upvotes: 0

Views: 49

Answers (1)

muka.gergely
muka.gergely

Reputation: 8329

In your example code you never call the updateMessage() function.

new Vue({
  el: "#app",
  data: {
    msg: ''
  },
  methods: {
    message: function() {},
    updateMessage: function() {
      const path = 'https://jsonplaceholder.typicode.com/posts/1';
      axios.get(path)
        .then((res) => {
          this.msg = res.data.title;
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });
    },
  },
  created() {
    this.message();
    this.updateMessage();
    this.$nextTick();
    this.$forceUpdate();
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>MSG: {{msg}}</div>
</div>

Upvotes: 1

Related Questions