关于vue中v-for里不能直接使用method方法的一点点思考

18 篇文章 0 订阅

今天遇到一个问题,是这样的,我在v-for里调用method的里的方法作为返回值传递给子组件,但是报错说getDataByPage方法是undifined,示例如下:

    <div v-for="(i,index) in count" :key="index">
      <div class="time" v-if="len > 2">
        <TimeLeftTop/>
        <TimeLine :list="getDataByPage((index+1)*6)" :is-re="true"/>
        <TimeBotRight/>
      </div>
      <div class="time" v-if="len > 2">
        <TimeLeftBot/>
        <TimeLine :list="getDataByPage((index+1)*6 + 6)"/>
        <TimeTipRight/>
      </div>
    </div>
methods:{
      getDataByPage(page){
        let arr = []
        if(this.dataList[page]){
          for (let i=0; i<6;i++){
            if(this.dataList[page+1]){
              arr.push(this.dataList[page])
              page++;
            } else {
              break;
            }
          }
        } else {
          this.$message.info("error")
        }
        return arr;
      },
}

但是呢,我需要借助索引来传参,也就是必须要使用method里的方法getDataByPage来作为返回值,这可让我有点尴尬,赶紧去吧vue的生命周期又看了一遍,但是也于事无补。哎,但是我发现data里的return里的数据是可以使用的哦。对,这就是启发点。所以我这样做:

 data() {
      return {
        getData: this.getDataByPage
    }
   }

然后利用getData替换原来的代码:

<div v-for="(i,index) in count" :key="index">
      <div class="time" v-if="len > 2">
        <TimeLeftTop/>
        <TimeLine :list="getData((index+1)*6)" :is-re="true"/>
        <TimeBotRight/>
      </div>
      <div class="time" v-if="len > 2">
        <TimeLeftBot/>
        <TimeLine :list="getData((index+1)*6 + 6)"/>
        <TimeTipRight/>
      </div>
    </div>

没错,就是这样,可以了。当然,这也引发了一些思考,为啥会这样呢?下面是ou的一点点总结:

在vue中,v-for是依赖数据来渲染dom元素,所以数据为第一前提,也就是说这部分dom是不受vue视听的数据。那么vue数据驱动的大本营在哪里呢?在data里。所以从这个方向思考问题就得以解决。

加油加油

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值