joe, 1 month ago

In last week’s post, I said, “That is because you can not pass an array directly into a web component”. I said that I might take a moment at some point to talk about how you could do that. Well, today is the day we are doing that.

Let’s start with a basic Lit example.

See the Pen by Joe Steinbring (@steinbring)
on CodePen.

You will notice that the ArrayList class has an items property that is an array type. Lit won’t let you do something like <array-list items = ['Item 1', 'Item 2', 'Item 3']></array-list> but it is fine with you passing it in using javascript. That means that myList.items = ['Item 1', 'Item 2', 'Item 3']; does the job, fine.

So, how can we do that with a Vue.js array?

See the Pen by Joe Steinbring (@steinbring)
on CodePen.

It is the same thing except you need to set the value of the list in an onMounted() lifecycle hook.

What about if we want to do it with React?

See the Pen by Joe Steinbring (@steinbring)
on CodePen.

With React, you just set the value in a useEffect() React hook.

https://jws.news/2024/how-to-pass-an-array-as-a-property-into-a-web-component/

#JavaScript #Lit #React #VueJs #WebComponents