問題描述：input 輸入框， 綁定計算屬性時，沒法雙向響應，可以和value綁定，再通過input事件，獲取dom的value。
解決辦法1：
用computed,不用v-model
單號： <el-input id="orderNumValue" :value.trim="orderNum" placeholder="請輸入" size="mini" style="width:75px"> </el-input >//這是element-ui的input組件 input <script> computed: { orderNum(){//歷史信息單號 switch(this.problemTypesOrder){ case "first": return this.formData1.billCode; break; case "second": return this.formData2.billCode; break; case "four": return this.formData4.orderCode; break; default: return this.formData1.billCode; } } } methods: { upData(){ console.log($("#orderNumValue").val())//通過dom的value值， 獲取value，操作數據 } } </script>
解決辦法2：
用watch，和v-model，不用computed
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<input id="wang" type="text" v-model="m.a" @input="fun">
{{m.a}}
<br>
<input type="text" v-model = "n">
{{n}}
</div>
</body>
<script src="https://sv-source.zt-express.com/gongdan/js/vue.min.js"></script>
<script>
console.log(new Date())
new Vue({
el: '#app',
data: function() {
return {
m:{a:"m"},
n:0
}
},
methods: {
fun(val){
console.log(this)
this.$set(this.m,"a",wang.value)
}
},
watch:{
m:{
deep: true,
handler: function (newVal,oldVal){
this.n = newVal.a
}
}
}
})
</script>
</html>
解決辦法3：
用computed 的get和set
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<input id="wang" type="text" v-model="m.a" >
{{m.a}}
<br>
<input type="text" v-model = "wangNum2">
{{wangNum2}}
</div>
</body>
<script src="https://sv-source.zt-express.com/gongdan/js/vue.min.js"></script>
<script>
console.log(new Date())
new Vue({
el: '#app',
data: function() {
return {
m:{a:"m"},
// n:0
}
},
methods: {
},
computed:{
wangNum1(){//沒有重寫時
return this.m.a
},
wangNum2:{//重寫方法
get(){
return this.m.a
},
set(val){
console.log(val)
this.m.a = val
}
}
}
})
</script>
</html>
因為 v-model 是雙向綁定的緣故，使用 computed 若不同時加 get 和 set 則報錯。