vue v-for的数组改变导致页面不渲染解决方法
直接在数组里,改变数组来达到重新渲染页面的目的,
需要用push等数组方法,
或者$set(),或者给数组重新赋值,来改变数组引用地址
而是直接索引=
<body>
<div id="app">
<li v-for='item in students'>
<span>{{ item.name }}</span>
<span>{{ item.age }}</span>
</li>
<button @click='addStudent'>click</button>
</div>
<script src="../vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
students: [
{name:"xioaming",age:10},
{name:"xioaming",age:101},
{name:"xioaming",age:102}
]
},
methods: {
addStudent: function(){
this.students[3] = {name:"xioaming",age:102333}//这样不能重新渲染页面
this.students.push({name:"xioaming",age:102333})
} } }) </script>

vue v-for的数组改变导致页面不渲染解决方法的更多相关文章
- [Q]系统环境改变导致“未注册”的解决方法
据用户反映设置账户开机密码后显示未注册, 具体表现: 1. 重装试用版,重新获取注册申请码,发现注册申请码跟原来没有发生变化. 2. 重新使用原来的授权文件注册,但打开后显示未注册. 3. 发现“** ...
- vue项目初始化时npm run dev报错webpack-dev-server解决方法
vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev- ...
- IOS-43-导航栏标题navigationItem.title不能改变颜色的两种解决方法
IOS-43-导航栏标题navigationItem.title不能改变颜色的两种解决方法 IOS-43-导航栏标题navigationItem.title不能改变颜色的两种解决方法 两种方法只是形式 ...
- 系统导出数据到excel,数据量过大(大约10W)条,导致服务器 cpu 100%解决方法
系统导出数据到excel,数据量过大(大约10W)条,导致服务器 cpu 100%解决方法
- vue.js 中使用(...)运算符报错的解决方法
vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSiz ...
- IE8 浏览器文本模式变为杂项(quirks)页面变形的解决方法
IE8 浏览器文本模式(document.documentMode)变为杂项(quirks)页面变形的解决方法. 正常情况下 document.documentMode 输出为8,而变为杂项之后doc ...
- Vue下路由History mode导致页面无法渲染的原因
用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件( ...
- VUE项目中使用this.$forceUpdate()强制页面重新渲染
在使用Vue框架开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值,我是在使用多层v-for嵌套时出现这种问题的, 解决方法:运用 this.$force ...
- vue 报错 :属性undefined(页面成功渲染)
vue 报错:Cannot read property 'instrumentId' of undefined" 相关代码如下: <template> ... <span& ...
随机推荐
- 对于eclipse building workspaces 慢的问题,解决方法
在项目根目录中有个.project文件,将其中的: <buildCommand> <name>org.eclipse.wst.jsdt.core.javascriptValid ...
- GPG(GnuPG)入门
GPG(GnuPG)入门 下载: https://gnupg.org/download/index.html 或者 http://www.hellopp.cn/page/5b9a1405c3f1f7d ...
- 安装rcssmin方法
#安装rcssmin方法'''pip install wheelpip install rcssmin --install-option="--without-c-extensions&qu ...
- Ubuntu18.04下的模拟神器RetroArch
安装 直接通过apt安装 sudo add-apt-repository ppa:libretro/stable sudo apt update sudo apt install retroarch ...
- iOS开发之Found a swap file by the name ".podfile.swp" owned by: Netban dated:...file name: ~N...
Found a swap file by the name ".podfile.swp" owned by: Netban dated: Fri Mar 24 13:57:27 2 ...
- AYUI -AYUI风格的 超美 百度网盘8.0
2017-03-23 19:18:43 (截止到2017-3-23 20:20:33开发结束)体验地址: http://pan.baidu.com/s/1bX28H4 新增传输列表 ======== ...
- service_names配置不正确,导致dg创建失败
service_names配置不正确,导致dg创建失败 伙伴发来消息,创建dg后,主备一直无法进行日志同步. 以下是查看过程 备库的alert日志: 2018-11-13T17:47:36.23129 ...
- Effective Java 第三版——64. 通过对象的接口引用对象
Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...
- PHP操作二进制字节数据
在PHP开发中大都是操作字符类数据,极为方便,但操作二进制又如何呢,下面代码举例看看. 函数: pack(format,args+) pack()和unpack()函数的第一个参数表如下 Bash ...
- 基于Python37配置图片文字识别
以管理员权限打开cmd控制台. 1.如何安装PIL 输入下面命令:pip install Pillow 参考:https://www.cnblogs.com/mrgavin/p/8177841.htm ...