title: display js variable to html using vue js
body: <p>how do i display firstname , lastname etc etc into data using vue.js<br />
  i have data in getData function so i have to display in data which is next to getData function. so how do i display firstname , lastname etc variable in data array, currently i am passing blank array to display, i have to pass value which is come through getData function</p>
  <p>JS file</p>
  <pre><code>Vue.use(VeeValidate);
  
  var getData = function(){
    axios.get('/api/getdataofmember')
    .then(function (response) {
      console.log(response.data.data);
      var firstname = response.data.data.firstname;
      var lastname = response.data.data.lastname;
    });
  }();
  
  
  
      const signupForm = new Vue({
          el: '#signup-form',
          data : {
              firstname : '',
              lastname :'',
              email : '',
              password : '',
              mobilenumber : '',
              date :''
          },
          methods: {
              processForm: function() {
          //attempt validating all
                  this.$validator.validateAll().then((result) =&gt; {
            if(result){
            var result1 = {
              'firstname' : this.firstname,
              'lastname' : this.lastname,
              'email' : this.email,
              'password' : this.password,
              'mobile_no' : this.mobilenumber,
              'dob' : moment(this.date).format('YYYY-MM-DD')
            }
  
  
              axios.post('/api/editmemberpro',result1)
              .then(function(response) {
                var result = response.data;
                var code=result.code;
                console.log(code);
                if(code==0)
                {
                  document.getElementById(&quot;result&quot;).innerHTML = result.message;
                }
                else {
                  document.getElementById(&quot;result&quot;).innerHTML = result.message;
                }
            })
            .catch(function (error) {
              console.log(error);
            });
                      }
                      this.firstname=this.lastname=this.email=this.password=this.mobilenumber=this.date=&quot;&quot;;
                      this.$validator.reset();
                  });
              }
          }
      });
  </code></pre>
  <p>html file</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;!doctype html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
          &lt;title&gt;addmember&lt;/title&gt;
          &lt;link href=&quot;https://fonts.googleapis.com/css?family=Raleway:100,600&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
          &lt;!-- &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js&quot;&gt;&lt;/script&gt; --&gt;
          &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js&quot;&gt;&lt;/script&gt;
      &lt;!-- include the VeeValidate library --&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js&quot;&gt;&lt;/script&gt;
       &lt;script src=&quot;https://unpkg.com/axios/dist/axios.min.js&quot;&gt;&lt;/script&gt;
      &lt;script&gt;
      // Notify vue about the VeeValidate plugin
       Vue.use(VeeValidate);
      &lt;/script&gt;
          &lt;style&gt;
          .error {
            color: red;
          }
          .success{
            color: green;
          }
          &lt;/style&gt;
        &lt;/head&gt;
        &lt;body&gt;
            &lt;div class=&quot;container&quot;&gt;
                &lt;div class=&quot;row main&quot;&gt;
                    &lt;div class=&quot;main-login main-center&quot;&gt;
                    &lt;h3&gt;Edit Member Profile&lt;/h3&gt;
                        &lt;form id=&quot;signup-form&quot; @submit.prevent=&quot;processForm&quot;&gt;
                            &lt;table&gt;
                            &lt;div class=&quot;form-group&quot;&gt;
                                &lt;tr&gt;&lt;td&gt;&lt;label for=&quot;first name&quot; &gt;First Name : &lt;/label&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;firstname&quot; :class=&quot;{ 'form-control': true, 'is-danger': errors.has('firstname') }&quot; v-model=&quot;firstname&quot; v-validate=&quot;'required|alpha|min:2|max:20'&quot;&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;span class=&quot;error&quot; v-show=&quot;errors.has('firstname')&quot;&gt;@{{ errors.first('firstname') }}&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;form-group&quot;&gt;
                                &lt;tr&gt;&lt;td&gt;&lt;label for=&quot;last name&quot; &gt;Last Name : &lt;/label&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;lastname&quot;  :class=&quot;{ 'form-control': true, 'is-danger': errors.has('lastname') }&quot; v-model=&quot;lastname&quot; v-validate=&quot;'required|alpha|min:2|max:20'&quot;&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;span class=&quot;error&quot; v-show=&quot;errors.has('lastname')&quot;&gt;@{{ errors.first('lastname') }}&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;form-group&quot;&gt;
                                &lt;tr&gt;&lt;td&gt;&lt;label for=&quot;email&quot;&gt;Email : &lt;/label&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;input type=&quot;email&quot; :class=&quot;{ 'form-control': true, 'is-danger': errors.has('email') }&quot; name=&quot;email&quot;  v-model=&quot;email&quot; v-validate=&quot;'required|email'&quot; disabled&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;span class=&quot;error&quot; v-show=&quot;errors.has('email')&quot;&gt;@{{ errors.first('email') }}&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
                                &lt;/div&gt;
                            &lt;div class=&quot;form-group&quot;&gt;
                                &lt;tr&gt;&lt;td&gt;&lt;label for=&quot;password&quot;&gt;Password : &lt;/label&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;input type=&quot;text&quot; :class=&quot;{ 'form-control': true, 'is-danger': errors.has('password') }&quot; name=&quot;password&quot;  v-model=&quot;password&quot; v-validate=&quot;'required|min:6'&quot;&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;span class=&quot;error&quot; v-show=&quot;errors.has('password')&quot;&gt;@{{ errors.first('password') }}&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;form-group&quot;&gt;
                                &lt;tr&gt;&lt;td&gt;&lt;label for=&quot;Mobile Number&quot;&gt;Mobile Number : &lt;/label&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;input type=&quot;text&quot; :class=&quot;{ 'form-control': true, 'is-danger': errors.has('mobilenumber') }&quot; name=&quot;mobilenumber&quot;  v-model=&quot;mobilenumber&quot; v-validate=&quot;{ required:true,numeric:true,min:10,max:10,regex:/^[6-9]\d{9}$/ }&quot;&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;span class=&quot;error&quot; v-show=&quot;errors.has('mobilenumber')&quot;&gt;@{{ errors.first('mobilenumber') }}&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;form-group&quot;&gt;
                                &lt;tr&gt;&lt;td&gt;&lt;label for=&quot;DOB&quot;&gt;Date of Birth : &lt;/label&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;input type=&quot;date&quot; :class=&quot;{ 'form-control': true, 'is-danger': errors.has('date') }&quot; name=&quot;date&quot;  v-model=&quot;date&quot; v-validate=&quot;'required'&quot;&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;span class=&quot;error&quot; v-show=&quot;errors.has('date')&quot;&gt;@{{ errors.first('date') }}&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
                            &lt;/div&gt;
                          &lt;/table&gt;
                            &lt;div class=&quot;form-group &quot;&gt;
                                &lt;button id=&quot;button&quot; :disabled=&quot;errors.any()&quot;&gt;Save&lt;/button&gt;
                            &lt;/div&gt;
                        &lt;/form&gt;
                        &lt;div id=&quot;result&quot; class=&quot;success&quot;&gt;  &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/body&gt;
      
             &lt;script type=&quot;text/javascript&quot; src=&quot;/js/memberprofile.js&quot;&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>