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

列表滚动,上拉加载功能

采用了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. 针对铁定浏览器的css选择符

    /***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child ...

  2. 20155239吕宇轩 Linux下IPC机制

    20155239吕宇轩 Linux下IPC机制 - 共享内存 原理:把所有需要使用的共享数据都存放在共享内存 区域中,任何想要访问这些共享数据的进程都必须在自己的进程地址空间中新增加一块内存区域,用来 ...

  3. 2015306 白皎 《网络攻防》Exp5 MSF基础应用

    2015306 白皎 <网络攻防>Exp5 MSF基础应用 一.基础问题 用自己的话解释什么是exploit,payload,encode. exploit指由攻击者或渗透测试者利用一个系 ...

  4. IntelliJ IDEA 添加jar包

      事先下载完成需要的javacsv.jar包. java项目在没有导入该jar包之前,显示如下图所示   点击 File ->  Project Structure(快捷键 Ctrl + Al ...

  5. 【LG3721】[HNOI2017]单旋

    [LG3721][HNOI2017]单旋 题面 洛谷 题解 20pts 直接模拟\(spaly\)的过程即可. 100pts 可以发现单旋最大.最小值到根,手玩是有显然规律的,发现只需要几次\(lin ...

  6. 4011: [HNOI2015]落忆枫音

    4011: [HNOI2015]落忆枫音 链接 分析: 原来是一个DAG,考虑如何构造树形图,显然可以给每个点找一个父节点,所以树形图的个数就是$\prod\limits_u deg[u]$. 那么加 ...

  7. Cocos2DX开发:记录遇到的一些问题和解决方法

    今天看了一下以前学习cocos2dx时记录的一些笔记,主要是在实际中遇到的一些问题,整理了一下,就成为了这篇文章,便于自己以后查找,也为一些新手提供点经验. 这篇文章会一直更新,将自己之后开发中遇到的 ...

  8. 高大上网站-CSS3总结1-图片2D处理以及BUG修复

    高大上网站-CSS3总结1-图片2D处理以及BUG修复 一,前言: 现在的前端UI相对JS来说,重视并不够. 但是CSS3提供的新特性,将现在的网站赤裸裸的划分为两类:一类还在写着老旧样式,或者通过b ...

  9. Rxjava - 操作符,线程操作的简单使用

    目录 创建操作符 10种常用的操作符定义 下面做几个操作符的demo演示 create from repeat defer interval Scheduler 什么是Scheduler? 如何使用S ...

  10. 出现 org.springframework.beans.factory.BeanCreationException 异常的原因及解决方法

    1 异常描述 在从 SVN 检出项目并配置完成后,启动 Tomcat 服务器,报出如下错误: 2 异常原因 通过观察上图中被标记出来的异常信息,咱们可以知道 org.springframework.b ...