小编给大家分享一下Vue之数组定义和赋值的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!问题场景:vue页面初始化展示请
小编给大家分享一下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之数组定义和赋值的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网html频道!
--结束END--
本文标题: vue之数组定义和赋值的示例分析
本文链接: https://www.lsjlt.com/news/76449.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0