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

最新推荐文章于 2023-05-31 15:29:30 发布

梅子丨朱

最新推荐文章于 2023-05-31 15:29:30 发布

阅读量3.8k

点赞数 3

分类专栏： VUE js

本文链接：https://blog.csdn.net/Mr_carry/article/details/108081881

版权

js 同时被 2 个专栏收录

32 篇文章 2 订阅

订阅专栏

VUE

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里。所以从这个方向思考问题就得以解决。

加油加油