1

Im passing a JSON from parent component to child component in LWC and I want to update the JSON in child component how can I do that? I think @api decorator is the cause that the JSON cannot be updates in the child component.

Sample code parent.js

@api Json = [{"ID":1,
             "Name":"test"}];

parent.html

<template>
<c-child Json={Json}></c-child>
</template>

child.js

@api Json

connectedcallback(){
Json[0].Name = "test101";
}

1 Answer 1

2

You are correct - it's the api decorator. This makes the property read-only

To get around, use a getter/setter to do this:

_json;
@api
get Json() {
  return this._json;
}
set Json(value) {
  this._json = value;
}

connectedcallback(){
  this._json[0].Name = "test101";
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .