今天遇到一个问题,是这样的,我在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里。所以从这个方向思考问题就得以解决。

加油加油

Logo

前往低代码交流专区

更多推荐