Uzyskiwanie danych formularza na temat przesyłania?

Question

Kiedy mój formularz jest składany życzę, aby uzyskać wartość wejściową:

<input type="text" id="name"> 

wiem, że mogę użyć wiązań wejściowych forma aktualizacji wartości do zmiennej, ale w jaki sposób mogę to zrobić tylko na przedstawienia. Obecnie mam:

<form v-on:submit.prevent="getFormValues"> 

Ale jak mogę uzyskać wartość wewnątrz metody getFormValues?

Poza tym, czy istnieje jakaś korzyść z robienia tego przy przesyłaniu zamiast aktualizowania zmiennej, gdy użytkownik wprowadza dane przez wiązanie?

Answer 1

należy użyć modelu wiązania, zwłaszcza tutaj wymienione przez Schlangguru w swojej odpowiedzi.

Istnieją jednak inne techniki, z których można korzystać, takie jak zwykły skrypt Javascript lub odniesienia. Ale ja naprawdę nie rozumiem dlaczego chcesz to zrobić zamiast modelu wiążące, to nie ma sensu do mnie:

<div id="app"> 
    <form> 
    <input type="text" ref="my_input"> 
    <button @click.prevent="getFormValues()">Get values</button> 
    </form> 
    Output: {{ output }} 
</div> 

Jak widać, kładę ref="my_input" uzyskać elementu DOM wejściowe:

new Vue({ 
    el: '#app', 
    data: { 
    output: '' 
    }, 
    methods: { 
    getFormValues() { 
     this.output = this.$refs.my_input.value 
    } 
    } 
}) 

zrobiłem mały jsFiddle jeśli chcesz ją wypróbować: https://jsfiddle.net/sh70oe4n/

ale po raz kolejny, moja odpowiedź jest daleko od czegoś można nazwać „dobrą praktykę”

Answer 2

Musisz zdefiniować model dla swojego wejścia.
<input type="text" id="name" v-model="name">

Następnie można uzyskać dostęp do wartości z this.name wewnątrz metody getFormValues.

to przynajmniej jak robią to w oficjalnym przykład TodoMVC: https://vuejs.org/v2/examples/todomvc.html (Patrz v-model="newTodo" w HTML i addTodo() w JS)

Answer 3

Ta akcja powoduje, że akcja emituje submit event, która zapewnia między innymi cel zdarzenia.

Celem zdarzenia submit jest obiekt HTMLFormElement, który ma właściwość elements. Zapoznaj się z artykułem this MDN link, aby dowiedzieć się, jak iterować, lub uzyskać dostęp do określonych elementów według nazwy lub indeksu.

Jeśli dodać obiekt name do wejścia, można uzyskać dostęp do pola tak w formie przedstawienia Handler:

<form v-on: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 
    } 
    } 
} 

Jako dlaczego chcesz chcą to zrobić: formularze HTML już dostarczać pomocny logika, jak wyłączanie działania, gdy formularz nie jest prawidłowy, a ja wolę go nie ponownie wprowadzić w JavaScript. Jeśli więc przed wykonaniem działania generuję listę przedmiotów wymagających niewielkiej ilości danych wejściowych (np. Wybierając liczbę elementów, które chciałbyś dodać do koszyka), mogę umieścić formularz w każdym elemencie, użyj sprawdzanie poprawności formularza natywnego, a następnie pobranie wartości z docelowego formularza przychodzącego z działania przesyłania.