系统家园网 - 专注分享最好用的电脑系统

vue数组赋值给空数组 Vue数组定义和赋值问题的解决方案

更新时间:2024-05-16 13:37:53作者:hnzkhbsb

  在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:

vue数组赋值给空数组 Vue数组定义和赋值问题的解决方案

页面部分:

vue数组赋值给空数组 Vue数组定义和赋值问题的解决方案

发现问题:data定义的数据为[]空数组,没有定义数组长度。而赋值的时候用数组下标赋值

修改代码后如下:

this.effective_date = [this.stamptimeToDate(detail.valid_date),this.stamptimeToDate(detail.invalid_date)];

打印effective_date的值:

vue数组赋值给空数组 Vue数组定义和赋值问题的解决方案

页面展示效果:

vue数组赋值给空数组 Vue数组定义和赋值问题的解决方案

  以上是关于如何将Vue数组赋值给空数组的全部内容,如果您遇到类似情况,可以按照以上小编的方法来解决。

Copyright ©  2012-2024 系统家园网 版权声明 网站地图