vue.js v-for每次循环两条项目,里面的处理函数会出现重复调用的问题

我现在要实现的是v-for每次按2条项目这样来循环,里面有函数是处理index,可是会出现符合的index重复调用的情况。
template:
clipboard.png
scrip:

<script>
let count = 3
let indexArr = []
export default {
  name: 'reportPage',
  data () {
    return {
        tdata: [1,2,3],
        myForm: {
              'myCompany': '海南凯迪网络资讯股份有限公司',
              'myTips': ''
        },
        totalPage: 4,
        
    }
  },
  mounted () {
      let that = this
      let height = document.body.clientHeight - 60
    that.$refs.main.style.height = height+'px'
//    alert(((that.tdata.length - 1)%2))
    
    if (that.tdata.length === 1 ) {
        that.totalPage = 4
    }else {
        that.totalPage = 4 + Math.floor((that.tdata.length - 1)/2) + 1
    }
//    alert(that.totalPage)
//    if ((that.tdata.length%2) && tdata.length>1) {
//        that.totalPage = 3 + that.tdata.length + 1
//    }else{
//        that.totalPage = 3 + that.tdata.length
//    }
  },
  methods: {
      submitForm (e) {
          let that = this
        e.preventDefault()
        that.form.validateFields((err, values) => {
            if (!err) {
                   console.log('Received values of form: ', values);
            }
          })
      },
      textChange () {
          let that = this
//          console.log('tips==',that.form.getFieldValue('tips'))
          that.myForm.myTips = that.form.getFieldValue('tips')
      },
      getPageNum (index) {
          console.log("index=", index)
//          console.log("count1=",count)
//          if (indexArr.indexOf(index) == -1) {
//              indexArr.push(index)
//              count--
//          }
//          console.log("count2==",count)
//          console.log('sum=', index + count)
//          return index + count
      }
  }
}
</script>

打印的结果:

clipboard.png
有谁遇到同样的问题吗?我想要的结果是打印出来的index不是重复执行的,就是执行一次。

阅读 6.6k
2 个回答

找到问题了,原因是应为vue的render使然的,应为我在mouted里改变了totalPage导致重新渲染了p,而p里面有用到的函数,所以又执行了一次,把totalPage的设置改为在created里就可以了。

把该段提取出来单独验证排除其他部分逻辑问题引起的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题