can slot become dynamic ?

[rained23]

Hi there, I am trying to create a field that will have something like <a href="urlToUserId"> userEmail</a> Because that vuetable unable to access other fields data, so I guess __slot is what this mean to be.

But I am trying to make the slot dynamic as example I created __slot:links .

How can I pass something to tell the my slot what actually to be formatted ?

I can achieve above but it will not be a dynamic slot. I am trying to figure out how can I tell slot what actually should be in href and the text it self.

Thanks.

[ratiw]

@rained23 I'm not sure if I understand you correctly. But I think what you're looking for is "scoped slot" which Vuetable is already supporting. All you have to do is providing a "scope" parameter, like so.

<template slot="links" scope="props">
  <a href="props.urlToUserId">{{ props.userEmail }}</a>
</template>

[rained23]

I am planning to make the component dynamic which is reusable on different situation , let say when I use my vuetable the links slot will generate userEmail, but what if I want userName instead and the link doesn't use props.rowData.id but something else. In simple word how can I tell the slot to use which props.rowData.* instead of props.rowData.email .

On Apr 20, 2017 9:48 AM, "Rati Wannapanop" [email protected] wrote:

@rained23 https://github.com/rained23 I'm not sure if I understand you correctly. But I think what you're looking for is "scoped slot" https://vuejs.org/v2/guide/components.html#Scoped-Slots which Vuetable is already supporting. All you have to do is providing a "scope" parameter, like so.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ratiw/vuetable-2-tutorial/issues/36#issuecomment-295538134, or mute the thread https://github.com/notifications/unsubscribe-auth/AA3YLel6M3Q5MQBkn0GeSUECKtpbSzv8ks5rxrlpgaJpZM4NB33h .

[ratiw]

@rained23 Not any way that I can think of. I would ask you to study Vuetable in more detail though as it was built to be generic enough to display any data. You just have to give it the field definition that it would need to work with.

But if you would like to make the table column/field so generic that you could make it editable with different type of form control, the only possible way that I can think of is making a component to handle that. In that case, you will have to use __component special field.

[sparamasivan]

Sounds like this is fixed in vuejs fx as per this thread https://github.com/ratiw/vuetable-2-tutorial/issues/14

[nimeshjainjbsols]

@rained23 In Vue2.6, you can try something like below inside your component: <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">

This will allow you to pass templates dynamically to your imported component.