title: Vue change value and text on axios post success or fail
body: <p>I am new to Vue and i've been learning, watching some tutorials and guides and trying to make auto upload form on file select, but it's really completely different from jquery, with jquery i usually easy find when google, when google for Vue i can't quite easy find answers nor much guides.</p>
  
  <p>What i have now, i just wrote some .vue code based on few guides i watched. I use Vue on Laravel framework. I want input form to automatically submit and upload file on select. And i managed to make that work, here is code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
  &lt;div class="vcontainer"&gt;
      &lt;label class="btn btn-default btn-file float-left"&gt;
        &lt;span v-if="file"&gt;Change&lt;/span&gt;
        &lt;span v-else&gt;Choose file&lt;/span&gt;
        &lt;input type="file" id="file" ref="file" v-on:change="handleFile()"&gt;
      &lt;/label&gt;
  
      &lt;div v-if="file"&gt;
          &lt;input type="hidden" :name="input_name" :value="file.id"/&gt;
          &lt;span&gt;{{ file.name }}&lt;/span&gt;  &lt;&lt; This output name of file
          &lt;span&gt;{{ file.id }}&lt;/span&gt;    &lt;&lt; This WONT output file id
      &lt;/div&gt;
      &lt;div v-else&gt;
          Nothing.
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: ['input_name', 'post_url', 'bind_user'],
          data() {
              return {
                  file: false
              }
          },
          methods: {
              handleFile() {
                  this.file = this.$refs.file.files[0];
  
                  this.submitFiles();
              },
              submitFiles() {
                  let formData = new FormData();
                  formData.append('file', this.file);
                  formData.append('bind_user', this.bind_user);
                  axios.post( this.post_url,
                      formData,
                      {
                          headers: {
                              'Content-Type': 'multipart/form-data'
                          }
                      }
                  ).then(function(response) {
                      this.file.id = response.data.id;
                      console.log(this.file); &lt;&lt; This show's object array and there is id field there along with name and other data.
                  }.bind(this)).catch(function(response) {
                  });
              },
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>What i have problem understanding is, how i can change text and input value based on events or response. When file is submitted and uploaded successfully i get response back:</p>
  
  <pre><code>{success: true, id: 42}
  </code></pre>
  
  <p>Very simple, but when i get response, i want to change that <code>id</code> value on hidden input so in the end i have this:</p>
  
  <pre><code>&lt;input type="hidden" :name="input_name" :value="42"/&gt;
  </code></pre>
  
  <p>And possibly to change text of input field from <code>Choose file</code> to <code>Change file</code>.</p>
  
  <p>If i would do this with jquery and ajax i could make it very simple, on ajax success find element with <code>input_name</code> id and change value.</p>
  
  <p>But on Vue it looks like i am stumbled on that.</p>
  
  <p>EDIT:</p>
  
  <p>I made a little progress and im now confused more because i get response and i get <code>file.id</code> in console.log but in vue template that same <code>id</code> is empty, but from same array <code>file.name</code> show file name.</p>