How to update data inside proxy object

Question

I am working on lighting components newly. I have array of object, which I have assed to @track decorator of LWC variable.

I wanted to dynamically update the this assed variable, how to do it? I am getting error. Or is there any way to do it?

@track assetsFilters = [
    { name: 'drilling', checked: false },
    { name: 'offshore', checked: false },
    { name: 'others', checked: false }
];

I tried out and updating the data using JSON parse & JSON stringfy.

[{"name":"drilling","checked":false},{"name":"offshore","checked":false},{"name":"others","checked":false}];

What is best way to re-assign values to proxy object. Whether directly assign them or other way method, like react uses setState method to update values.

Ex Directly assign

this.assetsFilters = [{"name":"drilling","checked":false},{"name":"offshore","checked":false},{"name":"others","checked":false}];

Answer 1

You can modify this variable normally, no need to do anything fancy:

this.assetsFilters[2].checked = false;

Do note that the variable must part of the class, so you must use this to access it.

export default class ... {
  @track assetsFilters = [
    { name: 'drilling', checked: false },
    { name: 'offshore', checked: false },
    { name: 'others', checked: false }
  ];

However, if the data comes from a cacheable data source (via wire), you need to duplicate the data first:

this.assetsFilters = this.assetsFilters.map(filter => ({...filter}));

Direct assignment also works, as in your example and the example immediately above.

This will give you a writable version of the data to work with.