Vue.js의 문서 요소에서 값 가져오기

Vue.js의 문서 요소에서 값 가져오기

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: ''
  }
}

입력 값을 바인딩하고 있으므로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>

이게 잘 될 거야, Vue의 요점은 DOM과 직접적으로 협력할 필요가 없다는 거야.간단히 사용하라.namevue 인스턴스를 통해 변수 지정(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>

고양이 가죽을 벗기는 많은 방법들이 있다 - 고양이 가죽을 벗기는 것은 보통이다.v-model, 다른 사용법$refs그리고 - 잊지마 - 바닐라 JS는 널 위해 모든 곳에 있어document.getElementById('id-name').value이 예에서 세 가지 방법을 모두 설명한다.

코드펜 예제

템플릿:

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

참조URL: https://stackoverflow.com/questions/53924885/get-value-from-document-element-in-vue-js