最近做项目,遇到一个问题

列表滚动,上拉加载功能

采用了better-scroll 插件,将better-scroll 封装成组件,采用父组件传递值给子组件的方式,子组件 采用$emit 方式 通知父组件值得变化,所以在父组件上获取总的数据(ajax),此时问题出现了,只要一上拉加载,就会报错,原因是改变了,父组件传递过去的总的数据。

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "list" (found in component )

组件内不能修改props的值,同时修改的值也不会同步到组件外层,即调用组件方不知道组件内部当前的状态是什么

解决方法:

采用 vuex 将总数据的list 放到 state里面,然后用计算属性获取state里面的值

代码如下

这样就可以解决每次加载新数据的时候,不会在报错

第二种解决方法

声明list 不要用props ,要把list 放到data 里面去,问题就解决了。

vue 实战报错解决方案的更多相关文章

  1. vue IE 报错 引用babel-polyfill

    一.vue 项目报错 vuex requires a Promise polyfill in this browser     在网上找到下面三篇文章,然而和我的项目都不太一样. 我的项目基于 基础模 ...

  2. 【转】Vue项目报错:Uncaught SyntaxError: Unexpected token <

    这篇文章主要介绍了Vue项目报错:Uncaught SyntaxError: Unexpected token <,在引入第三方依赖的 JS 文件时,遇到的一个问题,小编觉得挺不错的,现在分享给 ...

  3. Vue. 之 报错 Uncaught (in promise)

    Vue. 之 报错 Uncaught (in promise) 在点击同一个URL的时候,会报错如下: 解决方案: 在项目目录下运行 npm i vue-router@3.0 -S 即可.

  4. Vue.js报错Failed to resolve filter问题原因

    Vue.js报错Failed to resolve filter问题原因 金刚 vue Vue.js js javascript 之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错 ...

  5. RabbitMQ>Erlang machine stopped instantly (distribution name conflict?). The service is not restarted as OnFail is set to ignore.-报错解决方案 原来是NNND。。。

    >Erlang machine stopped instantly (distribution name conflict?). The service is not restarted as ...

  6. Vue的报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

    Vue的报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' ...

  7. Updates were rejected because the remote contains work that you do(git报错解决方案)

    Updates were rejected because the remote contains work that you do(git报错解决方案) 今天向GitHub远程仓库提交本地项目文件时 ...

  8. JMeter 报告监听器导入.jtl结果文件报错解决方案

    JMeter 报告监听器导入.jtl结果文件报错解决方案   by:授客 QQ:1033553122   1. 问题描述 把jmeter压测时生成的 .jtl结果文件导入监听器报告中,弹出如下错误提示 ...

  9. Python3.x:import urllib2报错解决方案

    Python:import urllib2报错解决方案 python2和3有些不一样: python2:输出为print 'hello world' python3:输出为print('hello w ...

随机推荐

  1. 修复Gradle CreateProcess error=206

    插件地址:https://plugins.gradle.org/plugin/ua.eshepelyuk.ManifestClasspath 修复Window系统中Gradle 路径太长问题, Fix ...

  2. springboot-web进阶(一)——表单验证

    一.概述 1.准备 先把快速入门篇的结构调整一下,按照自己的喜好或者要求调整: 2.需求 基于快速入门篇增加一个女生的需求,禁止添加未成年(18岁以下) 3.实现 第一步:在bean的属性上加对应约束 ...

  3. 20155321 《信息安全系统设计》Linux多线程的深入学习

    再次学习之多线程 基本概念的再次学习 线程是程序执行的最小单位(进程是资源管理的最小单位),线程隶属于某个进程中 进程有自己的数据段.代码段和堆栈段.线程通常叫做轻型的进程,每个线程共享其所附属进程的 ...

  4. python基础学习1-类相关内置函数

    #!/usr/bin/env python # -*- coding:utf-8 -*- #===issubclass(class,classinfo) 检查class是否是classinfo类的子类 ...

  5. 8 功能6:后台管理页面,编辑文章,xss攻击

    1.后台管理页面之文本编辑 # 后台管理url re_path(r'^cn_backend/$', views.cn_backend, name='cn_backend'), re_path(r'^c ...

  6. CF97C Winning Strategy

    CF97C Winning Strategy 洛咕(题意应该快传上去了) 这题好玄学鸭...都不知道为啥是对的 设\(f[i][j]\)表示打了i轮比赛,有j个参加了一次的人,直接枚举有几个参加了转移 ...

  7. java多线程的简单demo

    模拟场景:顾客买车从车库中取车,厂家生产车,车存储在车库中.买家.厂家对同一个车库中的车操作 一.不加同步机制的代码如下: package com.joysuch.testng.thread; imp ...

  8. 菜鸟vimer成长记——第4.1章、通用插件

    简介 关于插件的分类,此系列只会简单的区分为通用插件和编程插件.通用插件的意思是,不基于任何编程语言都可以使用的插件.编程插件,是针对于编程习惯,或者说是针对于某种语言的插件. 计划中,是先把基本常用 ...

  9. 神器 Tmux 的超绝便利

    服务器的任务不间断运行,就是利用了 tmux 的特性.就是说,一般 ssh 是断开就会停止所有之前连接 ssh 期间运行的所有 processes,而 tmux 的核心业务不在于把屏幕分成几块好看,而 ...

  10. Tomcat学习(一)------部署Web应用方法总结

    Tomcat部署Web应用方法总结 在Tomcat中部署Java Web应用程序有两种方式:静态部署和动态部署. 在下文中$CATALINA_HOME指的是Tomcat根目录. 一.静态部署 静态部署 ...