在vue.js中写个函数调用时完全没反应

Question

现在有个点赞需求，后台返回数据,字段名为islike有0和1 两种状态

0：当前用户没有赞这条商品
1：代表用户已经赞了这条商品 图标变为黄色
后台返回的数据大概是这样：
请求接口的时候islike赋值给data中的items
this.items = res.body.lists;
this.zanstatus = res.body.lists.islike

{
  msgflag:1,//1：数据传递成功 0：数据传递失败
  lists:{
     ....,
     islike:1//当前用户已经点赞过该商品
   }
}

<div class="demo">
  <button :class="likeclass" @click="like"></button>
</div>

var demo = new Vue({
    el:"",//略
    data:{
      items:"",//存储后端返回的数据
      zanstatus:""//存储返回的islike值
    },
    computed:{
      likeclass:function() {
          if(this.items. != "") {
            if(this.items == 0) {
              this.items = "zan"//正常灰色图标
            }
            if(this.items == 1) {
              this.items  = "zan-active"//图标变为黄色
            }
            return this.items
          }
      }
    },
    
})

!!!!到现在一切正常，后端传过的islike=0 图片正常为灰色，islike = 1图片变黄色

点击这个赞图标的时候，就有问题了！！！！

//点击手形赞的图标的时候，判断当前的islike值，如果为0说明用户要点赞，如果为1说明用户要取消赞
点击的时候调用like这个方法，class没发生任何变化 我尝试alert出likestatus的值，如果初始状态为1那么无论怎么点击依然为1，如果初始状态为0那么无论怎么点击也依然是0！！
求大神帮忙看看哪里除了问题
methods:{
  like:function() {
    this.$http({
      url:"请求点击取消赞或点赞的接口",
      params:{....},
      headers:{'Content-Type': 'appliaction/json'}
    }).then(function(res){
      if(res.body.msgflag == 1) {//代表请求成功
         if(this.zanstatus == 0) {//如果当前zanstatus为0表示用户想点赞
           $('button').removeClass('zan').addClass('zan-active');
           this.zanstatus  = 1
         }
         if(this.zanstatus == 0) {//如果当前zanstatus为1表示用户取消点赞
           $('button').removeClass('zan-active').addClass('zan');
           this.zanstatus  = 0
         }
      }
    }
    ,function(err){
      console.log(err)
    })
  }
}

Answer 1

$http請求後then裏的this.zanstatus怎麼2次判斷都是0，估計第2次判斷應是if(this.zanstatus == 1)

Answer 2

不知道你那个代码是复制粘贴的不，computed里面有一个错误，可以先细心的检查一遍代码，在必要的地方打印一下当前的值，看是否符合预期。

computed:{
      likeclass:function() {
          if(this.items. != "") {   //这里多了一个.
            if(this.items == 0) {
              this.items = "zan"
            }
            if(this.items == 1) {
              this.items  = "zan-active"
            }
            return this.items
          }
      }
    },

Answer 3

this

Answer 4

有几个建议给你：
1，楼上说了，this.zanstatus两次判断都是0
2，既然用了vue,就不要去操作dom，使用数据驱动v-bind:class
3,在函数里不要随便使用this，除非你非常清楚指向，最好用 let self = this;

Answer 5

if if
else if
将like函数中第二个if 改成else if

Answer 6

首先想说的是 vue 就是数据驱动尽可能不去操作 dom, 而 jquery 就是为了操作 dom 而存在的,为什么要把两者结合呢???

---

首先likeclass可以这么写

computed:{
      likeclass:function() {
          var classes = ['zan', 'zan-active']
          // 尽量用 !==
          if(this.items!== '') {
              return this.items = classes[this.items]
          }
          // 按照你的方式是以上写法
          ---
          // 这个方法既然是改变的 this.items 为什么要放在computed呢? 
          // 将 classes 放在 data 里面,因为不知道后面是不是还要有 2,3,4等状态,
          // 不然可以直接在标签上 使用三元运算绑定 class, <div class="zan" :class="items === 0 ? '' : '-active'"><div>
          // 将状态的 class 值放在数组里面就可以直接在 tag 上  <div :class="classes[items]"><div>
      }
    },

其次,点赞方法

methods:{
   // 你的点赞方式是什么类型的请求???
   // 那我假设是 post
   // 不知道你用的是不是 axios, 我假设你用的是
  like:function() {
    let url = `假装是一个url`
    let params = {}
    let config = {
        headers: {...}
    }
    // 这里看到你用的不是箭头函数,那就要缓存 this
    let _this = this
    this.$http.post(url, params, config).then(function(res){
    
      // 为什么有两次 this.zanstatus == 0 的判断 ???
      // 好吧 应该是 0 想点赞, 1 取消点赞
      if(res.body.msgflag == 1) { //代表请求成功
         _this.items = _this.zanstatus
         
        // 至于你的 zanstatus 是怎么回事 你再研究下 
      }
    },function(err){
      console.log(err)
    })
  }
}

希望能帮助到你!如果我哪里有错误还请指出