<template lang="pug">
.modal-task(:style="{display: showDetailsModal}")
    .modal-task-details
        .task
            .name(v-show="show")
                |Name: {{task.name}}
            .text(v-show="!show")
                textarea(v-model='task.name')
            .description(v-show="show")|description: {{task.description1}}
            .text(v-show="!show" @change="handleChange")
                textarea(v-model='task.description1')
        button(class='add-task' v-on:click="show=!show" v-show="!show" @click="closeForm()") Close
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'task-details-modal',
  props: ['showDetailsModal', 'task'],
  data () {
    return {
      show: true,
      showSaveButton: true,
      updatedTask: {}
    }
  },
  methods: {
    closeForm () {
      console.log(this.task)
      console.log(this.updatedTask)
    }
  },
  mounted () {
    this.updatedTask = this.task
  }
})
</script>

why i have in console log the same updatedTask and Task if I dont change updatedTask? AFAIK updatedTask is const, how can I fix this, I need that updatedTask will immutable

CodePudding user response：

The problem is, that javascript does assign the reference of the object. If you do this.updatedTask = this.task updatedTask and taskhave the same reference. That's why updatedTaskchanges if you change task. if you use lodash you can just this.updatedTask = _.cloneDeep(this.task); to create a independent copy. Otherwise, you have to use a different way to create a "real"copy of the taskobject