Vue.js如何获取原始数组值

Question

vuejs：

我有主对象数组

<div class="form-group m-form__group row"> <select class="form-control m-input" name="is_offer" id="is_offer" onchange="onSelect(event)" required> <option value="" disabled selected >--Choose--</option> <option value="yes" >Yes</option> <option value="no">No</option> </select> </div> <div id="offer"></div> <template id="discount-tpl"> <div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div> </template>

testArray

如果我迭代并尝试设置数组的值：

[ __ob__: Observer]
{
 `id` => 23,
 `value` => 65674 
}
{
 `id` => 20,
 `value` => 23423 
}
{
 `id` => 18,
 `value` => 55434 
}
{
 `id` => 22,
 `value` => 546464 
}

以上代码可以正常工作，并根据testArray.forEach((e2) => { Vue.set(e2, 'value', 0); }); 将值设置为0，但是，这也将主数组也设置为id。如何将值重置回原始状态？

我是否必须克隆原始阵列？如何在不重新加载页面的情况下取回值？

Answer 1

很明显，它将在您对函数中的主数组创建引用时使主数组值发生变化，而实际上您是在原始对象上进行迭代。您将必须创建上述对象的副本并对其进行更改以保持不变原来的样子。