vue中獲得input的值
阿新 • • 發佈：2019-01-05
原生 js
使用 getElementById 比較麻煩的地方
- 需要為元素設定 id
- 設定 id 之後，無法複用，因為一個頁面中不能存在兩個相同的 id
雙向繫結 v-model
分兩種情況
- input 預設為空。這種情況使用 v-model 最方便，通過 this.inputName 即可獲取到對應的值。
- input 有預設值。即，設定了 value 屬性的 Input。這種情況不能使用 v-model。否則 data 中的初始化值會把 value 的值覆蓋掉。正確的姿勢是使用 v-model, 然後通過 ajax 從後臺拉取預設值，給對應的 vuejs 變數賦值。對於簡單的後臺渲染頁面，這種方式略顯複雜。
jQuery
不爽的地方包含了使用原生 js 的幾項，同時還要額外引入 jQuery。
ref
在不適合使用 v-model 的時候，我更傾向於使用 ref.
vuejs 2.0 之後，廢棄了 vuejs 1.0 中的 this.$els，改用 this.$refs。即，使用 ref 屬性來標識一個元素。 這個地方抄襲 reactjs 太明顯了。
demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index Page</title>
</head>
<body>
<form action="" id="demo">
<input type="text" value="除錯 vuejs 2.0" ref="input1">
<a href="javascript:void(0)" v-on:click="test1">測試</a>
<br>
<span>{{ result1 }}</span>
<br>
<input type="text" v-model="input2">
<a href="javascript:void(0)" v-on:click="test2">測試</a>
<br>
<span>{{ result2 }}</span>
</form>
<script src="https://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script>
<script type="text/javascript" src="demo.js"></script>
</body>
</html>
demo.js
new Vue({
el: "#demo",
data: {
result1: null,
result2: null,
input2: ""
},
created: function() {
// the created hook is called after the instance is created
},
methods: {
test1: function () {
this.result1 = this.$refs.input1.value + " 成功!";
},
test2: function () {
this.result2 = this.input2 + " 成功!";
}
}
})
vue.min.js:6 Uncaught ReferenceError: input2 is not defined
這是一個比較奇葩的問題，如果 v-model 的變數不在 data 中初始化，就會報這個錯誤。 不知道是否是 vuejs 2.0 新引入的機制，在 1.0 中沒有發現這個問題。