vue.js deep watch

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js">
</script>

<div id="app">
  <div>
    <input type="radio" v-model="testval.Qhave_end" id="Qhave_end_Y"  value="Y">
    <label for="Qhave_end_Y">已停用</label>
    <input type="radio" v-model="testval.Qhave_end" id="Qhave_end_N"  value="N">
    <label for="Qhave_end_N">使用中</label>
    <input type="radio" v-model="testval.Qhave_end" value="0" checked>不指定  <br/>     
  Qhave_end-{{testval.Qhave_end}}【選取不指定=>值為0】<br/>
  Qhave_end_Y-{{testval.Qhave_end_Y}}【選取停用=>值為Y】<br/>
  Qhave_end_N-{{testval.Qhave_end_N}}【選取使用=>值為Y】<br/>
  </div>
  <br/>
  
</div>

JavaScript

/*
ref:https://ithelp.ithome.com.tw/articles/10187420
*/
var app = new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false ,test1:"", test2:""},
      { text: "Learn Vue", done: false ,test1:"", test2:""},
      { text: "Play around in JSFiddle", done: true ,test1:"", test2:""},
      { text: "Build something awesome", done: true ,test1:"", test2:""}
    ],
    testval:{ Qhave_end: "0" , Qhave_end_Y:"",Qhave_end_N: "" }
  },
  /*deep watch*/
  watch:{
  	testval:{    
    	handler: function (val) { 
      	switch(val.Qhave_end){        	
          case "Y":
          	val.Qhave_end_Y = "Y";
        		val.Qhave_end_N = "";
        		break;
        	case "N":
          	val.Qhave_end_Y = "";
        		val.Qhave_end_N = "Y";
            break;
          default:
          	val.Qhave_end_Y = "";
        		val.Qhave_end_N = "";
        		break;
        }
      	console.log(val);

      },
      deep: true
    }  
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})