<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>
如果我不更改updatedTask，為什么我在控制臺中記錄了相同的updatedTask 和Task？AFAIK updatedTask 是常量，我該如何解決這個問題，我需要 updatedTask 是不可變的
uj5u.com熱心網友回復：
問題是，javascript 確實分配了物件的參考。如果你這樣做this.updatedTask = this.task updatedTask并且task有相同的參考。這就是為什么updatedTask如果你改變就會改變task。如果您使用 lodash，您可以this.updatedTask = _.cloneDeep(this.task);創建一個獨立的副本。否則，您必須使用不同的方式來創建task物件的“真實”副本
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/385874.html
標籤：Vue.js