Vue.js 中使用 ref 重置对象到初始值的方法

如何使用 ref 在 Vue.js 中重置对象到初始值

在使用 Vue.js 的 ref 时，你可能需要将对象重置为初始值。这可以通过重新定义一个初始值对象，并将其赋值给 model 变量来实现。

代码示例:

const model = ref({
  name: '',
  space: '',
  yxjl: '',
  cfmxYxjl: '',
  cfmxJldw: '',
  cfmxSl: '',
  cfmxDj: '',
  cfmxZe: '',
  cfmxBeizhu: '',
  quantity: '',
  unit: '',
  cfmxYyfsID: 1,
  cfmxYyplID: 1,
  cfmxTs: 1,
  type: '',
  cfmxFygl: '',
  mxpl: '',
  mxfs: '',
});

// 定义初始值对象
const initialModel = {
  name: '',
  space: '',
  yxjl: '',
  cfmxYxjl: '',
  cfmxJldw: '',
  cfmxSl: '',
  cfmxDj: '',
  cfmxZe: '',
  cfmxBeizhu: '',
  quantity: '',
  unit: '',
  cfmxYyfsID: 1,
  cfmxYyplID: 1,
  cfmxTs: 1,
  type: '',
  cfmxFygl: '',
  mxpl: '',
  mxfs: '',
};

// 重置为初始值
model.value = { ...initialModel };

解释:

首先，定义一个名为 initialModel 的对象，包含了初始值。
然后将 model.value 重新赋值为 initialModel 的副本，使用 ... 展开运算符，创建一个新的对象，避免直接修改 initialModel。

注意事项:

直接将 model.value 赋值为 initialModel 会导致 model 和 initialModel 指向同一个对象，修改其中一个会影响另一个。
使用展开运算符创建新的对象可以确保 model 和 initialModel 独立存在，避免相互影响。

通过以上方法，你就可以轻松地将 ref 对象重置为初始值。