Vue composition api - copy reactive data object

user_14735146 0
Viewed 729

How can I make a simple copy of a reactive object with vue composition api.

I would like to do

state = form

instead of

state.var1 = form.var1 state.var2 = form.var2

Here is an example to illustrate why I have this question.

// <FormModal>
<template>
<button @click="submitHandler" >Submit</button>
</template>

<script>
import { defineComponent, reactive } from "vue"
export const defineComponent({
setup(){
  const state = reactive({
    var1: "var1",
    var2: "var2"
  })
  function submitHandler(){
    emit("submit", state)
  }
  return { submitHandler }
}
})
</script>

// <Parent>
<template>
  <form-modal @submit="formSubmitHandler" />
</template>

<script>
import { defineComponent, reactive } from "vue"
export const defineComponent({
 setup(){
  const state = reactive({
    var1: "var1",
    var2: "var2"
  })
  function formSubmitHandler(form){
    // state = form => What I would like to do!!!
    state.var1 = form.var1
    state.var2 = form.var2
  }

  return { formSubmitHandler }
}
})
</script>
reactive vuejs3 vue-composition-api
1 Answers

You can destructure your object

function formSubmitHandler(form){
  state = {...form}
}


const form = {
    var1: "var1",
    var2: "var2"
  }
const state = {...form}
console.log(state)

user_119891890
Related