在vue中 input的v-model和computed一起使用出现的问题
问题描述：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 则报错。
