Removing proxying on a Reactive Object in vue 3 composition API

Viewed 2016

I'm stuck on a reactivity problem. I am using Stein to create a back end in google sheets. Stein is very particular and wants request in [{}] format. I have done the following:

Template:

 <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);
};

The problem is the formArray[] object is still proxied and this causes Stein to fail. Anybody have a way to strip proxy totally out. See dev tools below.

Dev tools

The top console.log is w/reactivity, the second is a hard coded testArray array object which succeds in adding a row in Sheets. I need it in this second structure. I thought reading docs that torefs() would strip out reactivity but apparently not. Any suggestions on how to send non-proxied version of my formArray most appreciated.

1 Answers

Ok This is what worked:

const formAsPlainObject = toRaw(form);

The toRaw() function removes the proxy on an object.

Related