在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="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 则报错。