vue中v-if无效

Vagor
  • 716

我在使用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

回复
阅读 12k
5 个回答

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

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

数据好歹也贴出来吧

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

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

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

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

宣传栏