EastsideCo / polaris-vue

Allows you to use Shopify Polaris components in Vue 2.
https://www.npmjs.com/package/@eastsideco/polaris-vue
113 stars 27 forks source link

What's the best way to insert data into the slots / props here? #4

Closed patrickbolle closed 6 years ago

patrickbolle commented 6 years ago

Hi all, thanks for creating this. Experimenting with this for an app I'm building - relatively new to Vuejs and such and would love some pointers on this.

For example, I want to use a polaris resource list from this library :

<polaris-resource-list
    :items="[
                {
                    url: '#',
                    attributeOne: 'How to Get Value from Wireframes',
                    attributeTwo: 'by Jonathan Mangrove',
                    attributeThree: 'Today, 7:14pm',
                },
                {
                    url: '#',
                    attributeOne: 'Test blog post',
                    attributeTwo: 'by Jonathan Mangrove',
                    attributeThree: 'Jan 14, 2016, 8:24am',
                    badges: [
                        {content: 'Hidden'},
                    ],
                },
            ]">
</polaris-resource-list>

And I have my data in an object in Vuejs (accessible via this.orders).

Normally in Vue I would do something like -

         <div v-for="item in items" :key="item.id">
                        {{ item }}
                    </div>

What's the equivalent here? Might be overthinking this...

patrickbolle commented 6 years ago

Geesh, need more coffee. Super easy.

<polaris-resource-list v-for="order in orders" :key="order.id"
                        :items="[
                                    {
                                        attributeOne: order.id,
                                    },
                                ]">
                    </polaris-resource-list>

Works perfectly. Thanks anyways!