提交表單數據？

當我提交表單我希望得到的輸入值：提交表單數據？

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

我知道我可以使用表單輸入綁定更新值給一個變量，但我如何才能做到這一點上提交。我目前有：

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

但我怎麼能得到getFormValues方法內的值？

另外，側面的問題，當用戶通過綁定輸入數據時，提交而不是更新變量是否有任何好處？

來源

2017-03-09 panthro

您應該使用由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如果你想嘗試一下：https://jsfiddle.net/sh70oe4n/

但再次，我的反應是遠離的東西，你可以稱之爲「好習慣」

來源

2017-03-09 11:55:52 Hammerbot

感謝您提供有關良好實踐的建議，看起來我應該遵循模型綁定技術。 – panthro

你必須爲你的輸入定義一個模型。
<input type="text" id="name" v-model="name">

然後你就可以訪問你的getFormValues方法內部與 this.name值。

這至少是他們是如何做到這一點在官方TodoMVC例如：https://vuejs.org/v2/examples/todomvc.html（見HTML v-model="newTodo"和addTodo()在JS）

來源

2017-03-09 11:49:30 Schlangguru

表格submit動作發出一個submit event，它爲您提供事件目標等。

提交事件的目標是一個HTMLFormElement，它具有一個elements屬性。有關如何遍歷或按名稱或索引訪問特定元素的信息，請參見this MDN link。

如果一個name屬性添加到您的輸入，您可以訪問現場像這樣在您的表單提交處理程序：

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

至於爲什麼你要做到這一點：HTML表單已經提供了有益的邏輯如在表單無效時禁用submit動作，我不喜歡用Javascript重新實現。因此，如果我發現自己在執行動作之前生成了需要少量輸入的項目列表（例如選擇要添加到購物車的項目數量），我可以在每個項目中放置一個表單，使用本機表單驗證，然後從提交操作中獲取目標表單的值。

來源

2017-10-13 16:05:48

提交表單數據？

回答

相關問題