vue之数组定义和赋值的示例分析

小编给大家分享一下vue之数组定义和赋值的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联服务紧随时代发展步伐，进行技术革新和技术进步，经过10年的发展和积累，已经汇集了一批资深网站策划师、设计师、专业的网站实施团队以及高素质售后服务人员，并且完全形成了一套成熟的业务流程，能够完全依照客户要求对网站进行成都做网站、成都网站设计、建设、维护、更新和改版，实现客户网站对外宣传展示的首要目的，并为客户企业品牌互联网化提供全面的解决方案。

问题场景：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之数组定义和赋值的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

当前题目：vue之数组定义和赋值的示例分析
本文网址：https://www.cdcxhl.com/article30/pipjpo.html

成都网站建设公司_创新互联，为您提供ChatGPT、网站排名、品牌网站建设、静态网站、软件开发、网站策划

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联