CODEWITHSUNDEEP
vuejs3vue-composition-apivue-reactivity
Alan
Alan

Reputation: 1287

Removing proxying on a Reactive Object in vue 3 composition API

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.

Upvotes: 12

Views: 12814

Answers (1)

Alan
Alan

Reputation: 1287

Ok This is what worked:

const formAsPlainObject = toRaw(form);

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

Upvotes: 21

Related Questions