vue中v-if无效

Question

我在使用mint-ui中，搭配使用vue的v-if指令，但是发现没有效果，代码如下

<mt-cell :title="item.courseName" class="left" v-for="(item,index) in courseList" is-link :to="{ name: 's_myPaperList', params: { lessonId: item.lessonId ,teacherId:item.teacherId}} ">
  <mt-badge type="primary" v-if="item.paperToCheckCount > 0">{{item.paperToCheckCount}}</mt-badge>
</mt-cell>

v-if这一行无效，item.paperToCheckCount确实是大于零，可以无效。
我怀疑是我获取数据的方式有问题
我是通过axios获取数据的

this.$http.post('/getStudentLList', {
    studentId: window._const.studentId,
  }).then((res) => {
    for (let key in res.data.lessonList) {
      if (res.data.lessonList.hasOwnProperty(key)) {
        this.courseList.push({
          courseName: res.data.lessonList[key].courseName,
          lessonId: res.data.lessonList[key]._id,
          teacherId: res.data.lessonList[key].teacherId,
        })
        this.$http.post('/getPaperToCheckCount', {
          lessonId: res.data.lessonList[key]._id,
          studentId: window._const.studentId,
        }).then((res_in) => {
          this.courseList[key].paperToCheckCount = res_in.data.paperToCheckCount
        })
      }
    }
  })
  

我是先获取lessonId，再通过lessonId获取paperToCheckCount

Answer 1

item.paperToCheckCount这个值确定是数值型的么 v-if="~~item.paperToCheckCount > 0" 呢？

Answer 2

你后面的请求应该调用promise.all方法，promise.all

Answer 3

数据好歹也贴出来吧

Answer 4

for in 不是一个值得提倡的操作。看起来你正在遍历一个对象而不是数组。这时候，如果对象的所有 key 都动态通过 ajax 请求异步传入，那么 Vue 是无法检测到属性的新增的，从而也无法正确地使得 v-if 生效。

• 解决方案一，将对象数据结构改为数组。

• 解决方案二，在 data 中预先定义好对象中的所有 key。

Answer 5

this.courseList[key].$set = {'paperToCheckCount':res_in.data.paperToCheckCount}
这样试一下