제출 시 폼 데이터를 가져오고 있습니까?
양식을 제출할 때 입력 값을 얻고 싶습니다.
<input type="text" id="name">
폼 입력 바인딩을 사용하여 값을 변수로 업데이트할 수 있지만, 전송 시에만 이 작업을 수행할 수 있는 방법은 무엇입니까?현재 가지고 있는 것은 다음과 같습니다.
<form v-on:submit.prevent="getFormValues">
그러나 getFormValues 메서드 내에서 값을 가져오려면 어떻게 해야 합니까?
또한 사용자가 바인딩을 통해 데이터를 입력할 때 변수를 업데이트하는 것이 아니라 제출 시 실행함으로써 어떤 이점이 있습니까?
폼submitaction은 이벤트를 방출하여 이벤트 대상을 제공합니다.
전송 이벤트의 대상은 요소 속성을 가진 HTMLFormElement입니다.이름 또는 인덱스로 특정 요소를 반복하거나 액세스하는 방법은 이 MDN 링크를 참조하십시오.
를 추가하는 경우name입력에 따라 폼 제출 핸들러에서 다음과 같이 필드에 액세스할 수 있습니다.
<form @submit.prevent="getFormValues">
<input type="text" name="name">
</form>
new Vue({
el: '#app',
data: {
name: ''
},
methods: {
getFormValues (submitEvent) {
this.name = submitEvent.target.elements.name.value
}
}
}
이 작업을 수행하는 이유에 대해: HTML 폼은 이미 이 기능을 사용하지 않도록 설정하는 등의 유용한 로직을 제공하고 있습니다.submit유효하지 않은 폼의 액션은 Javascript에서 다시 구현하지 않는 것이 좋습니다.따라서 작업을 수행하기 전에 소량의 입력이 필요한 항목 목록을 생성하는 경우(카트에 추가할 항목 수 선택 등), 각 항목에 양식을 넣고 네이티브 양식 검증을 사용한 후 제출 작업에서 가져온 대상 양식에서 값을 가져올 수 있습니다.
특히 Schlangguru가 응답한 것처럼 모델 바인딩을 사용해야 합니다.
다만, 통상의 Javascript나 레퍼런스 등, 사용할 수 있는 다른 테크닉이 있습니다.하지만 왜 모델 바인딩 대신 그렇게 하고 싶어 하는지 이해가 안 됩니다.
<div id="app">
<form>
<input type="text" ref="my_input">
<button @click.prevent="getFormValues()">Get values</button>
</form>
Output: {{ output }}
</div>
보다시피, 나는ref="my_input"입력 DOM 요소를 가져오려면:
new Vue({
el: '#app',
data: {
output: ''
},
methods: {
getFormValues () {
this.output = this.$refs.my_input.value
}
}
})
당신이 시험해보고 싶다면, 저는 작은 jsFiddle을 만들었습니다.
하지만 다시 한 번 말하지만, 제 답변은 "좋은 관행"이라고 할 수 있는 것과는 거리가 멀어요.
입력에 대한 모델을 정의해야 합니다.
<input type="text" id="name" v-model="name">
그런 다음 다음 다음 방법으로 값에 액세스할 수 있습니다.this.name내면에getFormValues방법.
적어도 TodoMVC 공식 예에서는 다음과 같이 합니다.https://vuejs.org/v2/examples/todomvc.html (을 참조).v-model="newTodo"HTML 및addTodo()(JS의 경우)
.★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★나는 다음 용도를 조합했습니다.v-model "submitEvent" 'submitEvent'를 지정합니다. <input type="submit" value="Submit">submitEvent를 설정합니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<form @submit.prevent="getFormValues">
<div class="form-group">
<input type="email" class="form-control form-control-user"
v-model="exampleInputEmail"
placeholder="Enter Email Address...">
</div>
<div class="form-group">
<input type="password" class="form-control"
v-model="exampleInputPassword" placeholder="Password"> </div>
<input type="submit" value="Submit">
</form>
</div>
<script>
const vm = new Vue({
el: '#app',
methods: {
getFormValues (submitEvent) {
alert("Email: "+this.exampleInputEmail+" "+"Password: "+this.exampleInputPassword);
}
}
});
</script>
</body>
</html>언급URL : https://stackoverflow.com/questions/42694457/getting-form-data-on-submit
'programing' 카테고리의 다른 글
| nuxt.js 미들웨어에서 vuex 스토어 getter를 사용할 수 없습니다. (0) | 2022.08.01 |
|---|---|
| this.$refs, this.$140, 이거요.Vue 2 Composition API를 사용한 $route 액세스 (0) | 2022.08.01 |
| (A+B)의 FFT가 FFT(A) + FFT(B)와 다른 이유는 무엇입니까? (0) | 2022.08.01 |
| v-select에 사용자 지정 텍스트 입력 (0) | 2022.08.01 |
| 간격이 있는 vueJS 라이프사이클 후크에서의 비동기 Jest 테스트 (0) | 2022.07.29 |