在 vue 3 组合 API 中删除响应式对象上的代理

Question

我陷入了反应性问题。我正在使用 Stein 在谷歌表格中创建后端。Stein 非常挑剔，希望以 [{}] 格式请求。我做了以下事情：

模板：

<div class="field">
  <label class="label">Model #</label>
  <div class="control">
    <input
      class="input"
      placeholder="Model #"
      v-model="form.ModelNum"
    />
  </div>
</div>

<div class="field">
  <label class="label">Bar Code</label>
  <div class="control">
    <input
      class="input"
      placeholder="Bar Code"
      v-model="form.Barcode"
    />
  </div>
</div>

<div class="field">
  <label class="label">Serial #</label>
  <div class="control">
    <input
      class="input"
      placeholder="Serial #"
      v-model="form.SerialNum"
    />
  </div>
</div>
//etc

JS

<script setup>
import { reactive, defineEmits, toRefs } from "vue";
import addRow from "../helperFunctions/addRow.js";

// Variables
let form = reactive({
  Equipment: "",
  Make: "",
  ModelNum: "",
  Barcode: "",
  SerialNum: "",
  Location: "",
  Condition: "",
});

const formArray = [];

const submitForm = function () {
  const formAsPlainObject = toRefs(form);
  formArray.push(formAsPlainObject);
  console.log(formArray);
  console.log(testArray);

  addRow(testArray);
};

问题是formArray[]对象仍然被代理，这导致 Stein 失败。任何人都有办法完全去除代理。请参阅下面的开发工具。

顶部的 console.log 具有反应性，第二个是硬编码的 testArray 数组对象，它成功在表格中添加了一行。我在第二个结构中需要它。我认为阅读文档torefs()会消除反应性，但显然不会。任何有关如何发送我的formArray的非代理版本的建议都非常感谢。

Answer 1

好的，这就是有效的：

const formAsPlainObject = toRaw(form);

toRaw() 函数删除对象上的代理。