在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数组赋值给空数组的全部内容,如果您遇到类似情况,可以按照以上小编的方法来解决。
微软资讯推荐
win10系统推荐
系统教程推荐