vue数组赋值给空数组 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数组赋值给空数组的全部内容，如果您遇到类似情况，可以按照以上小编的方法来解决。