title: VueJS Syntax: Saving a value in a Promise
body: <p>With <a href="https://stackoverflow.com/questions/46427612/vuejs-syntax-running-method-on-mount">some help from StackOverflow</a> I got the following to run my <code>loadData</code> when the page loads and when the button is clicked.</p>
  
  <p>However the text on the page is not updating. Something is wrong about my syntax with <code>this.text = xhr.data</code></p>
  
  <pre><code>index.html:
  
  &lt;div id="app"&gt;&lt;/div&gt;
  
  app.js:
  
  const Vue = window.Vue = require("vue");
  Vue.prototype.$http = require("axios");
  const App = require("./components/App.vue");
  
  window.app = new Vue({
      el: "#app",
      render: h =&gt; h(App)
  });
  
  components/app.vue:
  
  &lt;template&gt;
      &lt;div&gt;
          &lt;h1&gt;Test&lt;/h1&gt;
          &lt;p&gt;{{text}}&lt;/p&gt;
          &lt;button @click="this.loadData"&gt;Reload&lt;/button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      mounted() {
          this.loadData();
      },
      methods: {
          loadData() {
              this.$http.get("https://icanhazip.com")
                  // This fails
                  .then(xhr =&gt; this.text = xhr.data);
          }
      }
  };
  &lt;/script&gt;
  </code></pre>