素材牛VIP会员
vue 数据更新的一个问题
 请***丶  分类:JavaScript  人气:951  回帖:1  发布于6年前 收藏

初学VUE,发现要个问题,让我无法理解
html:

<div id="watch-example">
    <p>
      请输入要查询的省份:
      <input v-model="question" type="text"/>
    </p>
    <p>{{answer}}</p>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/vue.min.js"></script>

因为别的我用的不孰,所以我直接引了个JQ进行AJAX通信
js:

     var watchExampleVM=new Vue({
      el:"#watch-example",
      data:{
        question:'',
        answer:'省份ID查询'
      },
      watch:{
        //如果 question  发生改变,这个函数会执行
        question:function(newQuestion){
          this.answer='正在查询..';
          this.getAnswer();
        }
      },
      methods:{

        getAnswer:function(){

          var tAnswer=this.answer;
          console.log(tAnswer);  //  在这里我拿了一下数据,数据是正常的
          var pName=this.question;
          if(this.question!=""){
            $.ajax({
              type:'post',
              url:'http://192.168.1.1:8383/_API/_province/get',
              data:null,
              success:function(data){
                if(data.code=='E0000'){
                  for(var i=0;i<data.data.length;i++){
                    var one=data.data[i];
                    if( one.name == pName ){
                      console.log(pName,tAnswer,tAnswer===watchExampleVM.answer);  //在这里我console一下明明是true,可以为什么数据不更新哪?
                      tAnswer="省份ID:"+one.id;
                      return;
                    }
                  }
                  tAnswer="未找到省份ID";

                }else{
                  watchExampleVM.answer=data.message;  //直接写上数据是可以更新的
                }
              }
            });
          }
        }


      }
    });

为什么明明是全等的引用传递,在jq的AJAX里是更新不了的,可是直接写确是可以更新?

这是我的响应数据:

{"code":"E0000","data":[{"id":"1","name":"北京市","icon":"beijing","fid":"0","definition":"1","level":"1"},{"id":"22","name":"天津市","icon":"T","fid":"0","definition":"1","level":"1"},{"id":"43","name":"河北省","icon":null,"fid":"0","definition":"1","level":"6"},{"id":"227","name":"山西省","icon":null,"fid":"0","definition":"1","level":"6"},{"id":"472","name":"辽宁省","icon":null,"fid":"0","definition":"1","level":"6"},{"id":"587","name":"吉林省","icon":null,"fid":"0","definition":"1","level":"6"},{"id":"657","name":"黑龙江省","icon":null,"fid":"0","definition":"1","level":"6"},{"id":"801","name":"上海市","icon":"S","fid":"0","definition":"1","level":"1"},{"id":"823","name":"江苏省","icon":null,"fid":"0","definition":"1","level":"6"},{"id":"943","name":"浙江省","icon":null,"fid":"0","definition":"1","level":"6"},{"id":"1045","name":"安徽省","icon":null,"fid":"0","definition":"1","level":"6"},{"id":"1168","name":"福建省","icon":null,"fid":"0","definition":"1","level":"6"},{"id":"1263","name":"江西省","icon":null,"fid":"0","definition":"1","level":"6"},{"id":"1374","name":"山东省","icon":null,"fid":"0","definition":"1","level":"6"}]}
 标签:vue.jsjavascript

讨论这个帖子(1)垃圾回帖将一律封号处理……

Lv5 码农
wa***ao 移动开发工程师 6年前#1
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取