小编给大家分享一下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的值:
页面展示效果:
以上是“vue之数组定义和赋值的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。