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实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 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+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
设定php简写功能的方法
2019/11/28 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
node.js超时timeout详解
2014/11/26 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
Vue计算属性的使用
2017/08/04 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
python3使用QQ邮箱发送邮件
2020/05/20 Python
Python实现微信机器人的方法
2019/09/06 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
介绍一下你对SOA的认识
2016/04/24 面试题
2014年科技工作总结
2014/11/26 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python