Получить значение из элемента документа в Vue.js

Question

Я создаю интерфейс для своего приложения SpringBoot.Чтобы отправить запрос Get, мне нужно получить значение из ввода в моей программе, но безуспешно.

Я пытался использовать любой метод king типа .value, valueOf (), .toString () послеВыделение document.getElementById («name») и ни один из них не работает.

// элемент

<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>

// функция

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

Iнеобходимо вывести текст, введенный пользователем, в строку имени на странице и опубликовать его в console.log ().

/// Добавлено

data() {
  return {
    result: '',
    name: '',
    seats: '',
    reservation: ''
  }
}

Answer 1

Это должно работать хорошо, весь смысл Vue в том, что вам не нужно работать напрямую с DOM.Просто используйте переменную name либо через свой экземпляр vue (в данном случае vm), либо через this.Помните, что функции стрелок фиксируют текущую область видимости, и поэтому вы не можете правильно использовать this в них, убедитесь, что вы используете function() ... определения для своих методов.

Я обрезал много жира изпример, но все это будет работать с ним в вашем конечном продукте.Я просто не хотел копировать весь ваш проект для небольшой демонстрации.

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>

Answer 2

Поскольку вы привязываете входное значение к свойству name, используя v-model, вы можете использовать это свойство непосредственно внутри вашего метода следующим образом: свойства

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

и name должны быть определены внутриваш объект данных, например:

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

и попробуйте text в качестве типа ввода вместо name:

<input type="text" ... 

Полный пример

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>