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 相关文章推荐
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 Javascript
前端JavaScript大管家 package.json
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
基于header的一些常用指令详解
2013/06/06 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
jquery 使用简明教程
2014/03/05 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
通信专业个人自我鉴定
2013/10/21 职场文书
优秀广告词大全
2014/03/19 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
2015年预算员工作总结
2015/05/14 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
单位收入证明范本
2015/06/18 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python