vue 数组元素(data)发生改变没有跟新到(view)解决方法
2017-09-20 10:26
573 查看
vue原理,通过set改变视图。话不多说,直接上代码:
html:
<Row>
<Col span="24">
<ButtonGroup v-for="(item,index) in JSON.parse(tabSort)">
<Button @click="releaseTimeBut(index)">
<Icon v-show="releaseTime[index]" type="arrow-down-a"></Icon>
<Icon v-show="!releaseTime[index]" type="arrow-up-a"></Icon>
</Button>
</ButtonGroup>
</Col>
</Row>
js:
<script>
export default {
props: ['tabSort'],
data() {
return {
releaseTime:[false,false,false]
}
},
beforeDestroy() {
},
methods: {
releaseTimeBut(index){
this.releaseTime[index]=!this.releaseTime[index];
this.$set(this.releaseTime, index, this.releaseTime[index]);
}
}
};
</script>
html:
<Row>
<Col span="24">
<ButtonGroup v-for="(item,index) in JSON.parse(tabSort)">
<Button @click="releaseTimeBut(index)">
<Icon v-show="releaseTime[index]" type="arrow-down-a"></Icon>
<Icon v-show="!releaseTime[index]" type="arrow-up-a"></Icon>
</Button>
</ButtonGroup>
</Col>
</Row>
js:
<script>
export default {
props: ['tabSort'],
data() {
return {
releaseTime:[false,false,false]
}
},
beforeDestroy() {
},
methods: {
releaseTimeBut(index){
this.releaseTime[index]=!this.releaseTime[index];
this.$set(this.releaseTime, index, this.releaseTime[index]);
}
}
};
</script>
相关文章推荐
- Vue页面在苹果设备中微信(X5)浏览器title不改变的解决方法
- 使用innodb_data_file_path修改数据文件位置,发生The server quit without updating PID file错误的解决原因及方法。
- 动态改变select元素的option时宽度发生变化解决方法
- 关于WebView的loaddata方法中文乱码问题解决,记录而已。
- MySQL没有 data 目录的解决方法或者重建 data 目录
- MVC中发生System.Data.Entity.Validation.DbEntityValidationException验证异常的解决方法
- MySQL没有 data 目录的解决方法或者重建 data 目录
- vue2.0 路由不显示router-view的解决方法
- 无法将类型为“IList”的对象强制转换为类型“System.Data.DataRowView” 。的解决方法
- presentViewController显示方式的窗口,没有导航栏的解决方法
- TextView设置LengthFilter,粘贴超长文本的时候没有提示的解决方法
- 解决WebView调用loadData()方法显示乱码的问题
- 无法将类型为“IList”的对象强制转换为类型“System.Data.DataRowView” 。的解决方法
- 子线程更新UI会发生android.view.ViewRoot$CalledFromWrongThreadException异常的解决方法
- 解决WebView调用loadData()方法显示乱码的问题
- Vue 路由切换时页面内容没有重新加载的解决方法
- CodeSimth - .Net Framework Data Provider 可能没有安装。解决方法[转载 ]
- viewpager删除item(数据源发生改变)没有即时更新
- codesmith6.5连接Mysql提示“找不到请求的 .Net Framework Data Provider。可能没有安装。”解决方法
- 解决Android中AsyncTask的多线程阻塞问题,android 3.0以后AsyncTask的execute ()方法发生了改变