Get value from document element in Vue.js

user_9343686 0
Viewed 11410

I am creating frontend for my SpringBoot application. To send a Get request I need to get the value from input in my program, but have no success.

I've tried to use any king of .value, valueOf(), .toString() methods after selecting document.getElementById("name") and non of them seem to work.

// the element 

<form class="pt-3">
   <div class="form-group">
      <label for ="name">Person ID</label>
      <input
         type="text"
         id="name"
         class="form-control is"
         :class="{'is-invalid': $v.name.$error} "
         @input="$v.name.$touch()"
         v-model="name"
         placeholder="123456"
         value=""
      >
      <div class="invalid-feedback" v-if="!$v.name.minLength">ID must be at least 5 characters</div>
      <button class="btn btn-secondary btn-lg btn-block" @click="FetchData">Найти</button>
   </div>  
</form>

// the function

AddPerson: function () {
    var nperson = document.getElementById("name").valueOf().value.name;
    console.log(nperson);
}

I need to output the text the user inputs into the name line on the page and post it to console.log().

/// Added

data() {
  return {
    result: '',
    name: '',
    seats: '',
    reservation: ''
  }
}
vuejs2 bootstrap-4 vue.js javascript
3 Answers

Since you're binding the input value to name property using v-model you could use that property directly inside your method as follows:

 AddPerson: function () {
     var nperson = this.name;
   console.log(nperson);
 }

and name property should be defined inside your data object like :

 data(){
    return{
          name:'',
          ...
        }
     }

and try text as input type instead of name :

<input type="text" ...

Full example

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data() {
    return {
      result: '',
      name: '',
      seats: '',
      reservation: ''
    }
  },
  methods: {
    FetchData() {
      var nperson = this.name
      console.log(nperson);
    
  },
  AddPerson: function() {
    var nperson = this.name
    console.log(nperson);
  }

}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app" class="container">
  <form class="pt-3">
    <div class="form-group">
      <label for="name">Person ID</label>
      <input type="name" id="name" class="form-control is" @input="AddPerson" v-model="name" placeholder="123456" value="">
      <div class="invalid-feedback">ID must be at least 5 characters</div>
      <button class="btn btn-secondary btn-lg btn-block" @click.prevent="FetchData">Найти</button>
    </div>
  </form>
</div>

user_81728570

This should work well, the whole point of Vue is so you don't have to work directly with the DOM. Simply use the name variable either through your vue instance (vm in this case) or through this. Remember that arrow functions capture the current scope and therefore you can't use this correctly within them, be sure you're using function() ... definitions for your methods.

I trimmed a lot of the fat from the example but it'll all still work with it in your final product. I just didn't want to replicate your whole project for a small demo.

let vm = new Vue({
  el : "#root",
  data : {
    name : "hi"
  },
  methods : {
    FetchData : function(e) {
      console.log(this.name);
      e.preventDefault();
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<form id="root" class="pt-3">
  <div class="form-group">
    <label for ="name">Person ID</label>
    <input
      id="name"
      v-model="name"
      placeholder="123456"
    >
    <div class="invalid-feedback" v-if="!name.minLength">ID должн быть минимум 5 символов</div>
    <button class="btn btn-secondary btn-lg btn-block" @click="FetchData">Найти</button>
  </div>

user_33082900

There are many ways to skin a cat - the standard vuejs one would be through v-model, one other using $refs and - don't forget - vanilla JS is allways there for you as well with document.getElementById('id-name').value. I demonstrate all three ways in this example:

Codepen Example

Template:

  <template>
    <div id="app">
      <h5>Tree ways to get your input value</h5>
      <div>
         <div class="form-group">
            <label for="name">Person ID</label>
            <input
               type="text"
               id="myName"
               ref="myInput"
               v-model="name"
               placeholder="123456"
            >
            <div class="spacer">
              <button @click="outputFromModel">v-model</button>
             <button @click="outputFromRef">ref</button>
             <button @click="outputFromId">ID</button>
           </div>
         </div>  
      </div>
    </div>
  </template>

JS:

  <script>
  export default {
    data() {
      return {
        name: '',
      }
    },
    methods: {
      outputFromModel() {
        alert(this.name)
      },
     outputFromRef() {
        alert(this.$refs.myInput.value)
      },
      outputFromId() {
        alert(document.getElementById('myName').value)
      },
    }
  };
  </script>
user_16001930
Related