2017-03-24 12 views
0
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
</head> 
<body> 
    <div id="app"> 
     <div class="layui-input-block" style="width:510px;"> 
      <form class="layui-form" action=""> 
       <select v-model="form.entrCode"> 
        <option value="">please select an entry</option> 
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
        <option value="4">4</option> 
       </select> 
      </form> 
     </div> 
    </div> 
</body> 
</html> 

<script src="//cdn.bootcss.com/vue/2.2.4/vue.min.js"></script> 
<script type="text/javascript"> 
    var app = new Vue({ 
     el: "#app", 
     data: { 
      action: '', 
      form: { 
       entrCode: '', 
      } 
     }, 
     watch: { 
      action: function (val) { 
       if (val !== "add"){ 
        var vm = this; 
        //$.get("/park/GetLEDDtl", { areaId: vm.form.code }, function (rs) { 
        // vm.form = rs; 
        //}, "json"); 

        //simulate setting on ajax.success 
        vm.form = { "entrCode": "20" }; 
       } 
      }, 
      "form.entrCode": function (val, old) { 
       alert("【entryCode changed】 new:" + val + " old:" + old); 
      } 
     }, 
     created: function() { 
      this.action = "edit"; 
     } 
    }); 
</script> 

enter image description hereVue.jsは私のコードを見てください一つだけ要求

で2倍のデータチャンを見ました。私はapp.form = objectを1回だけ設定しました。なぜ2つの値が変更されて監視されていますか?

最初は''から'20 'に変更されていますが、これは私の予想どおりですが、突然それは20からundefinedに変わります。

(コードがpatsed私はAJAXリクエストをコメントして、値を直接設定する。)

だけで何が起こりましたか?

答えて

0

変数を設定する値にはオプションがありません。選択オブジェクトは、値を表示するために同期することはできません。そのため、値を未定義に戻します。

関連する問題