vue踩坑记录之数组定义和赋值问题


Posted in Javascript onMarch 20, 2019

问题场景: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

vue踩坑记录之数组定义和赋值问题

页面部分:

vue踩坑记录之数组定义和赋值问题

发现问题:data定义的数据为[]空数组,没有定义数组长度,而赋值的时候用数组下标赋值

修改代码后如下:

this.effective_date = [this.stamptimeToDate(detail.valid_date),this.stamptimeToDate(detail.invalid_date)];

打印effective_date的值:

vue踩坑记录之数组定义和赋值问题

页面展示效果:

vue踩坑记录之数组定义和赋值问题

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 #Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 #Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 #Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 #Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 #Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 #Javascript
详解JavaScript作用域和作用域链
Mar 19 #Javascript
You might like
php下实现农历日历的代码
2007/03/07 PHP
常用的php ADODB使用方法集锦
2008/03/25 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
关于Javascript作用域链的八点总结
2013/12/06 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
ES6的新特性概览
2016/03/10 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
python实现快速排序的示例(二分法思想)
2018/03/12 Python
基于Django实现日志记录报错信息
2019/12/17 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
Python 使用office365邮箱的示例
2020/10/29 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
Python实现石头剪刀布游戏
2021/01/20 Python
IRO美国官网:法国服装品牌
2018/03/06 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
超市后勤自我鉴定
2014/01/17 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
大学生创业计划书
2019/06/24 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL