V-for with template

Question

I am using vue-bootstrap. I try to create dynamic a grid component that gets headers and datas. Since we will not know how many column passed to the component, we should check every item that are passed.

<template>
    <b-table striped hover :items="items"></b-table>
        <div v-for="title in items">
          <template slot="title.key" slot-scope="data">
            <input v-if="title.isActive" type="text" v-model="data.value">
            <textarea v-else type="text" v-model="data.value"></textarea>
          </template>
        </div>
   </b-table>
</template>

<script>
const items =[
      {'label': 'Description', 'key': 'description'},
      {'label': 'Name',  'key': 'name', 'isActive': true},
    ]

So, if isActive is true, then this template should be textarea(Column should be changed with textarea instead of input) However it is not working and no columns changed neither inputbox nor textarea and stay default template

Could you please help on these question.

Thank you

Solution

I think you should separate title in v-for and slot-scope variable to avoid confusing:

<template v-for="title in items" :key="title.key">
  <template :slot="title.key" slot-scope="item">
    <input v-if="item.isActive" type="text" v-model="item.value">
    <textarea v-else type="text" v-model="item.value"></textarea>
  </template>
</template>

Comments

[Husam Ibrahim]

items should be inside your data. And you shouldn't use mustaches inside your attributes.

[Can Cinar]

I used <template slot="title.key" slot-scope="data"> and it did not worked as well

[Shubham Patel]

Can you provide a jsfiddle?

[Bhojendra Rauniyar]

It should be title.isActive

[Phil]

Try <template :slot="title.key"...