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

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

25.12.2018 09:57:19 Просмотров 285 Источник

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

Я пробовал использовать любого короля .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);
}

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

/// Добавлен

data() {
  return {
    result: '',
    name: '',
    seats: '',
    reservation: ''
  }
}
У вопроса есть решение - Посмотреть?

Ответы - Получить значение из элемента документа в Vue.JS / Get value from document element in Vue.js

Является ответом!
Boussadjra Brahim

25.12.2018 10:03:33

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

v-model

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

и попробуйте nameв качестве типа ввода вместо data(){ return{ name:'', ... } } :

text

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

name
<input type="text" ... 

https://stackoverflow.com/questions/53924885/get-value-from-document-element-in-vue-js/53924935#comment94691444_53924935
Когда я использую this.name я ничего не получаю на выходе, хотя вход "123" в текстовом поле
https://stackoverflow.com/questions/53924885/get-value-from-document-element-in-vue-js/53924935#comment94691446_53924935
Это 100% ожидаемый способ, которым это должно быть сделано. Вся суть Vue и других фреймворков MVC заключается в том, что вы никогда не должны касаться документа напрямую, если только в фреймворке не отсутствует ключевая функция.
https://stackoverflow.com/questions/53924885/get-value-from-document-element-in-vue-js/53924935#comment94691463_53924935
@Paul не могли бы вы предоставить свой объект данных?
https://stackoverflow.com/questions/53924885/get-value-from-document-element-in-vue-js/53924935#comment94691498_53924935
@BoussadjraBrahim я добавил в описание
https://stackoverflow.com/questions/53924885/get-value-from-document-element-in-vue-js/53924935#comment94691683_53924935
Проблема не исчезла после того, как я попытался исправить ее, используя ваш комментарий. У вас есть еще какие-нибудь идеи, почему я, кажется, получаю это?
https://stackoverflow.com/questions/53924885/get-value-from-document-element-in-vue-js/53924935#comment94691700_53924935
@Paul я обновил свой ответ, добавив запущенный фрагмент кода
https://stackoverflow.com/questions/53924885/get-value-from-document-element-in-vue-js/53924935#comment94691985_53924935
Ваше последнее редактирование, похоже, работает <input type= "name" id=" name "class=" form-control is "@input= "AddPerson" v-model=" name "placeholder=" 123456 " value=" " > как я могу сделать так, чтобы функция AddPerson вызывалась не каждый раз, когда я добавляю букву, А когда я нажимаю кнопку?
https://stackoverflow.com/questions/53924885/get-value-from-document-element-in-vue-js/53924935#comment94694404_53924935
@Paul спасибо за принятие моего ответа и чтобы избежать вызова функции каждый раз, когда вы вводите письмо, вы должны просто удалить @input="AddPerson"
Matthew Ludwig

25.12.2018 10:15:27

Это должно хорошо работать, весь смысл 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>

Закрыть X