Within my Vue application, I am encountering the following code:
data: {
emailData: JSON.parse('#{{@mail.data}}')
},
computed: {
emailJson: function () {
return JSON.stringify(this.emailData);
}
},
methods: {
addBlock: function (type) {
this.emailData.elements.push({type: type, data: ''})
},
removeBlock: function (index) {
this.emailData.elements.splice(index, 1)
},
moveBlock: function (direction, index) {
if (direction === 'up' && index > 0) {
let temp = this.emailData.elements[index - 1]
this.emailData.elements[index - 1] = this.emailData.elements[index]
this.emailData.elements[index] = temp
} else if (direction === 'down' && index < this.emailData.elements.length) {
let temp = this.emailData.elements[index + 1]
this.emailData.elements[index + 1] = this.emailData.elements[index]
this.emailData.elements[index] = temp
}
}
}
When I execute moveBlock('up',2), the emailData displays the expected changes, but emailJson remains unchanged. However, if I subsequently call addBlock, both the changes introduced by moveBlock and addBlock are reflected in emailJson.
What could be the reason behind addBlock and removeBlock updating the computed value, while moveBlock does not trigger the same behavior?