ngsl8755 2022-03-14 10:41 采纳率: 70%
浏览 164
已结题

vue set后的值如何赋值给变量

鼠标滚动加载页面,如果在data中定义list,没有问题,因为需要加判断初始值,所以在computed中进行定义,但是操作后,新的值newVal并没有赋给list
<div v-else class="cardLists" v-load-more="loadMore">
    <a-row :gutter="16">
       <a-col :span="8" v-for="(item, idx) in list" :key="idx">
         
         <a-card :bordered="true">
           <span slot="title">
             {{ hosData[idx].hospitalCode + ' ' +  hosData[idx].hospitalName }}
           </span>
           <span slot="extra">
             <a-button 
               type="link" 
               @click="onClick(hosData[idx].hospitalName, hosData[idx].hospitalCode, $event)">
               筛查
             </a-button>
           </span>
           <span class="n-Level" :class="nameMap[hosData[idx].hospitalLevel]">
             <span>{{ hosData[idx].hospitalLevel }}</span>
           </span>
           <a-descriptions>
             <a-descriptions-item label='结算数据'>
               {{ hosData[idx].hisCount }}
             </a-descriptions-item>
           </a-descriptions>
         </a-card>
         
      </a-col>
     </a-row>
  </div>

export default {
  computed: {
    list: {
      get() {
        if(this.hosData.length < 30) {
          return this.hosData.length
        } else {
          return 30
        }
      },
      set(newVal) {
        console.log('newVal:');
        console.log(newVal);
        return newVal
      }
    }
  },
directives: {
    /* 通过判断 滚动距离 >= 子级高度 - 自身高度,如果为true则认为到达底部 */ 
    loadMore: {
      inserted(el, binding) {
        
        const scrollFn = () => {
          // 子级高度
          let scrollH = 0;
          $(el).children().each((idx, item) => {
            scrollH += $(item).get(0).offsetHeight
          });

          let wrapH = $(el).height(); // 自身高度
          let scrollT = $(el).scrollTop(); // 滚动距离
          let isBottom = scrollT >= scrollH - wrapH;
          if (isBottom) {
            binding.value && binding.value()
          }
        };
        $(el).on('scroll', _.throttle(scrollFn, 500))
      }
    }
  },
  methods: {
    loadMore() {
      console.log("this.list:");
      console.log(this.list);
      this.list += 30;
    }
  }
}

img

因为没有赋值,改过代码
      set(newVal) {
        console.log('newVal:');
        console.log(newVal);
        list = newVal
      }

结果会报错

img

不知道最终应该如何操作,请指教!
  • 写回答

2条回答 默认 最新

  • _念_ 2022-03-14 11:23
    关注

    设置值的时候 只是会调用set方法 但是你获取到的list 始终是get方法的放回值 比如说 this.list = 100;但是你的hosdata的长度大于30,那么取list的值的时候,结果是30;
    按照你这个写法,你的list永远都是一个固定的值。看了你的代码,你应该是要做一个滚动加载的。
    定义一个当前页pageIndex, 每页大小pageSize,直接循环你的hosData,循环的时候判断v-if="idx < pageIndex * pageSize",滚动的回调里面pageIndex ++ 就好了。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 崽崽的谷雨 2022-03-14 10:51
    关注
    
     data(){
         return{
             list:[]
         }
     },
    

    你缺少了data吧 把这个加上去

    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 3月25日
  • 已采纳回答 3月21日
  • 创建了问题 3月14日

悬赏问题

  • ¥20 C语言字符串不区分大小写字典排序相关问题
  • ¥15 关于#python#的问题:我希望通过逆向技术爬取1688搜索页下滑加载的数据
  • ¥15 学习C++过程中遇到的问题
  • ¥15 关于Linux的终端里,模拟实现一个带口令保护的屏保程序遇到的输入输出的问题!(语言-c语言)
  • ¥15 学习C++过程中遇到的问题
  • ¥15 请问,这个嵌入式Linux系统怎么分析,crc检验区域在哪
  • ¥15 二分类改为多分类问题
  • ¥15 Unity微信小游戏上调用ReadPixels()方法报错
  • ¥15 如何通过求后验分布求得样本中属于两种物种其中一种的概率?
  • ¥15 q从常量变成sin函数,怎么改写python代码?