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 模拟用户单击事件
Dec 31 Javascript
js parsefloat parseint 转换函数
Jan 21 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 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
第六节--访问属性和方法
2006/11/16 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
php提交post数组参数实例分析
2015/12/17 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python函数装饰器实现方法详解
2018/12/22 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
python and or用法详解
2019/06/26 Python
wxPython实现分隔窗口
2019/11/19 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
集团公司人力资源部岗位职责
2014/01/03 职场文书
工作鉴定评语
2014/05/04 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
热门专业求职信
2014/05/24 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
物资采购管理制度
2015/08/06 职场文书
小学新课改心得体会
2016/01/22 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书