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:
<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
<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.
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.
Ok This is what worked:
const formAsPlainObject = toRaw(form);
The toRaw() function removes the proxy on an object.