vue踩坑记录之数组定义和赋值问题
问题场景：vue页面初始化展示请求后台返回的数据失败，没有报错
<el-form-item label="有效日期"> <div class="block"> <el-date-picker v-model="effective_date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> </div> </el-form-item>
data(){
return{
effective_date: []
}
}
methods: {
getContractInfo(){
this.service.hqStore.getContractList(this.$route.query.uid).then((res)=>{
let detail = res.datalist[this.$route.query.index];
this.effective_date[0] = this.stamptimeToDate(detail.valid_date);
this.effective_date[1] = this.stamptimeToDate(detail.invalid_date);
}
}
}
created(){
this.getContractInfo();
setTimeout(()=>{
console.log(this.effective_date);
})
},
输出的this.effective_date：
页面部分：
发现问题：data定义的数据为[]空数组，没有定义数组长度，而赋值的时候用数组下标赋值
修改代码后如下：
this.effective_date = [this.stamptimeToDate(detail.valid_date),this.stamptimeToDate(detail.invalid_date)];
打印effective_date的值：
页面展示效果：
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对小牛知识库的支持。
-
本文向大家介绍Java中数组协变和范型不变性踩坑记录，包括了Java中数组协变和范型不变性踩坑记录的使用技巧和注意事项，需要的朋友参考一下 前言 变性是OOP语言不变的大坑，Java的数组协变就是其中的一口老坑。因为最近踩到了，便做一个记录。顺便也提一下范型的变性。 解释数组协变之前，先明确三个相关的概念，协变、不变和逆变。 下面话不多说了，来一起看看详细的介绍吧 一、协变、不变、逆变 假设，我为
-
本文向大家介绍浅谈vuepress 踩坑记，包括了浅谈vuepress 踩坑记的使用技巧和注意事项，需要的朋友参考一下 vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器，实际上就是一个vue的spa应用，内置webpack，可以用来写文档。恰好最近需要为一些组件写文档，就动手撸了一波，毕竟刚发布，遇到不少坑，最终还是磕磕碰碰的运行起来了，为了避免大家踩同样的坑，特意将搭
-
最近新做了一个项目，因为完全是另起炉灶，可以抛开历史问题，重新尝试新的思路与解决方案。也兢兢业业的踩坑俩月，把项目初版跑上线了。这一版主要是保证功能流程没问题，下一版会对开发流程、性能、错误监控等问题进行优化。截至目前记录的一些问题先抽空整理下。 如题，项目采用vue-cli + es6 + axios这三个作为基础跑起来的，依然是移动端，考虑兼容性 安卓4.1 & ios7.1，刚开始引入了jq
-
本文向大家介绍java学习之JasperReport踩坑，包括了java学习之JasperReport踩坑的使用技巧和注意事项，需要的朋友参考一下 下面进入正题，来介绍下今天的猪脚JasperReport或者叫它ireport亦或jasperstudio，当然后面两个是它的可视化工具。 JasperReport是个什么东西？ 这货其实在国内用户也不少，是个国外的产品，而且可以说在JAVA报表领域应
-
本文向大家介绍微信小程序组件生命周期的踩坑记录，包括了微信小程序组件生命周期的踩坑记录的使用技巧和注意事项，需要的朋友参考一下 组件生命周期，通常是我们业务逻辑开始的地方。 如果业务场景比较复杂，组件生命周期有不符合预期的表现时， 可能会导致一些诡异的业务bug，它们极难复现和修复。 组件 attached 生命周期执行次数 按照通常的理解，除moved/show/hide等生命周期可能多次执行外
-
本文向大家介绍Spring Cloud Ribbon的踩坑记录与原理详析，包括了Spring Cloud Ribbon的踩坑记录与原理详析的使用技巧和注意事项，需要的朋友参考一下 简介 Spring Cloud Ribbon 是一个基于Http和TCP的客服端负载均衡工具，它是基于Netflix Ribbon实现的。它不像服务注册中心、配置中心、API网关那样独立部署，但是它几乎存在于每个微服务的