V-for with template












0















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










share|improve this question




















  • 1





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

    – Husam Ibrahim
    Nov 20 '18 at 5:04











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

    – JavaChip
    Nov 20 '18 at 5:05













  • Can you provide a jsfiddle?

    – Shubham Patel
    Nov 20 '18 at 5:07











  • It should be title.isActive

    – Bhojendra Rauniyar
    Nov 20 '18 at 5:09











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

    – Phil
    Nov 20 '18 at 5:09
















0















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










share|improve this question




















  • 1





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

    – Husam Ibrahim
    Nov 20 '18 at 5:04











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

    – JavaChip
    Nov 20 '18 at 5:05













  • Can you provide a jsfiddle?

    – Shubham Patel
    Nov 20 '18 at 5:07











  • It should be title.isActive

    – Bhojendra Rauniyar
    Nov 20 '18 at 5:09











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

    – Phil
    Nov 20 '18 at 5:09














0












0








0








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










share|improve this 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







vue.js vuejs2 vue-component bootstrap-vue






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 20 '18 at 5:10







JavaChip

















asked Nov 20 '18 at 4:57









JavaChipJavaChip

418




418








  • 1





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

    – Husam Ibrahim
    Nov 20 '18 at 5:04











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

    – JavaChip
    Nov 20 '18 at 5:05













  • Can you provide a jsfiddle?

    – Shubham Patel
    Nov 20 '18 at 5:07











  • It should be title.isActive

    – Bhojendra Rauniyar
    Nov 20 '18 at 5:09











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

    – Phil
    Nov 20 '18 at 5:09














  • 1





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

    – Husam Ibrahim
    Nov 20 '18 at 5:04











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

    – JavaChip
    Nov 20 '18 at 5:05













  • Can you provide a jsfiddle?

    – Shubham Patel
    Nov 20 '18 at 5:07











  • It should be title.isActive

    – Bhojendra Rauniyar
    Nov 20 '18 at 5:09











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

    – Phil
    Nov 20 '18 at 5:09








1




1





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

– Husam Ibrahim
Nov 20 '18 at 5:04





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

– Husam Ibrahim
Nov 20 '18 at 5:04













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

– JavaChip
Nov 20 '18 at 5:05







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

– JavaChip
Nov 20 '18 at 5:05















Can you provide a jsfiddle?

– Shubham Patel
Nov 20 '18 at 5:07





Can you provide a jsfiddle?

– Shubham Patel
Nov 20 '18 at 5:07













It should be title.isActive

– Bhojendra Rauniyar
Nov 20 '18 at 5:09





It should be title.isActive

– Bhojendra Rauniyar
Nov 20 '18 at 5:09













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

– Phil
Nov 20 '18 at 5:09





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

– Phil
Nov 20 '18 at 5:09












5 Answers
5






active

oldest

votes


















2














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>





share|improve this answer
























  • Unfortunately, it did not work...

    – JavaChip
    Nov 20 '18 at 6:51











  • Is there any error?

    – ittus
    Nov 20 '18 at 7:04











  • My bad, after minor modification it is worked. Thank you so much!

    – JavaChip
    Nov 20 '18 at 7:08



















0














You have to use below snippet.



<input v-if="title.isActive" type="text" v-model="title.value">
<textarea v-else type="text" v-model="title.value"></textarea>





share|improve this answer































    0














    Since, the isActive property is present inside the object in items array, you need to access it as a property of an iteratee.



    So the code becomes:



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

    </template>
    </div>





    share|improve this answer































      0














      Thanks to ittus's answer,after minor modification following way is worked.



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


      Thank you all.






      share|improve this answer































        0














        You can check out this example for dynamic columns.






        new Vue({
        el: "#app",
        data: {
        fields: [{
        key: "id",
        label: "Id",
        colType: "span"
        }, {
        key: "name",
        label: "Name",
        colType: "button"
        }, {
        key: "uhh",
        label: "uhh..",
        colType: "idk"
        }],
        items: [{
        id: 0,
        name: "Test 0"
        }, {
        id: 1,
        name: "Test 1"
        }, {
        id: 2,
        name: "Test 2"
        }]
        }
        });

        <div id="app">
        <b-table :items="items" :fields="fields">
        <template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
        <div v-if="field.colType === 'button'">
        <h5>{{data.item.name}}</h5>
        <b-button>Am Button</b-button>
        </div>
        <div v-else-if="field.colType === 'span'">
        <h5>{{data.item.name}}</h5>
        <span>Am Span</span>
        </div>
        <div v-else>
        <h5>{{data.item.name}}</h5>
        Am Confused
        </div>
        </template>
        </b-table>
        </div>








        share|improve this answer























          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386482%2fv-for-with-template%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          5 Answers
          5






          active

          oldest

          votes








          5 Answers
          5






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          2














          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>





          share|improve this answer
























          • Unfortunately, it did not work...

            – JavaChip
            Nov 20 '18 at 6:51











          • Is there any error?

            – ittus
            Nov 20 '18 at 7:04











          • My bad, after minor modification it is worked. Thank you so much!

            – JavaChip
            Nov 20 '18 at 7:08
















          2














          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>





          share|improve this answer
























          • Unfortunately, it did not work...

            – JavaChip
            Nov 20 '18 at 6:51











          • Is there any error?

            – ittus
            Nov 20 '18 at 7:04











          • My bad, after minor modification it is worked. Thank you so much!

            – JavaChip
            Nov 20 '18 at 7:08














          2












          2








          2







          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>





          share|improve this answer













          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>






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 20 '18 at 5:11









          ittusittus

          6,1522723




          6,1522723













          • Unfortunately, it did not work...

            – JavaChip
            Nov 20 '18 at 6:51











          • Is there any error?

            – ittus
            Nov 20 '18 at 7:04











          • My bad, after minor modification it is worked. Thank you so much!

            – JavaChip
            Nov 20 '18 at 7:08



















          • Unfortunately, it did not work...

            – JavaChip
            Nov 20 '18 at 6:51











          • Is there any error?

            – ittus
            Nov 20 '18 at 7:04











          • My bad, after minor modification it is worked. Thank you so much!

            – JavaChip
            Nov 20 '18 at 7:08

















          Unfortunately, it did not work...

          – JavaChip
          Nov 20 '18 at 6:51





          Unfortunately, it did not work...

          – JavaChip
          Nov 20 '18 at 6:51













          Is there any error?

          – ittus
          Nov 20 '18 at 7:04





          Is there any error?

          – ittus
          Nov 20 '18 at 7:04













          My bad, after minor modification it is worked. Thank you so much!

          – JavaChip
          Nov 20 '18 at 7:08





          My bad, after minor modification it is worked. Thank you so much!

          – JavaChip
          Nov 20 '18 at 7:08













          0














          You have to use below snippet.



          <input v-if="title.isActive" type="text" v-model="title.value">
          <textarea v-else type="text" v-model="title.value"></textarea>





          share|improve this answer




























            0














            You have to use below snippet.



            <input v-if="title.isActive" type="text" v-model="title.value">
            <textarea v-else type="text" v-model="title.value"></textarea>





            share|improve this answer


























              0












              0








              0







              You have to use below snippet.



              <input v-if="title.isActive" type="text" v-model="title.value">
              <textarea v-else type="text" v-model="title.value"></textarea>





              share|improve this answer













              You have to use below snippet.



              <input v-if="title.isActive" type="text" v-model="title.value">
              <textarea v-else type="text" v-model="title.value"></textarea>






              share|improve this answer












              share|improve this answer



              share|improve this answer










              answered Nov 20 '18 at 5:05









              Paresh GamiParesh Gami

              3,32831327




              3,32831327























                  0














                  Since, the isActive property is present inside the object in items array, you need to access it as a property of an iteratee.



                  So the code becomes:



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

                  </template>
                  </div>





                  share|improve this answer




























                    0














                    Since, the isActive property is present inside the object in items array, you need to access it as a property of an iteratee.



                    So the code becomes:



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

                    </template>
                    </div>





                    share|improve this answer


























                      0












                      0








                      0







                      Since, the isActive property is present inside the object in items array, you need to access it as a property of an iteratee.



                      So the code becomes:



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

                      </template>
                      </div>





                      share|improve this answer













                      Since, the isActive property is present inside the object in items array, you need to access it as a property of an iteratee.



                      So the code becomes:



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

                      </template>
                      </div>






                      share|improve this answer












                      share|improve this answer



                      share|improve this answer










                      answered Nov 20 '18 at 5:06









                      waleed aliwaleed ali

                      319214




                      319214























                          0














                          Thanks to ittus's answer,after minor modification following way is worked.



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


                          Thank you all.






                          share|improve this answer




























                            0














                            Thanks to ittus's answer,after minor modification following way is worked.



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


                            Thank you all.






                            share|improve this answer


























                              0












                              0








                              0







                              Thanks to ittus's answer,after minor modification following way is worked.



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


                              Thank you all.






                              share|improve this answer













                              Thanks to ittus's answer,after minor modification following way is worked.



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


                              Thank you all.







                              share|improve this answer












                              share|improve this answer



                              share|improve this answer










                              answered Nov 20 '18 at 7:07









                              JavaChipJavaChip

                              418




                              418























                                  0














                                  You can check out this example for dynamic columns.






                                  new Vue({
                                  el: "#app",
                                  data: {
                                  fields: [{
                                  key: "id",
                                  label: "Id",
                                  colType: "span"
                                  }, {
                                  key: "name",
                                  label: "Name",
                                  colType: "button"
                                  }, {
                                  key: "uhh",
                                  label: "uhh..",
                                  colType: "idk"
                                  }],
                                  items: [{
                                  id: 0,
                                  name: "Test 0"
                                  }, {
                                  id: 1,
                                  name: "Test 1"
                                  }, {
                                  id: 2,
                                  name: "Test 2"
                                  }]
                                  }
                                  });

                                  <div id="app">
                                  <b-table :items="items" :fields="fields">
                                  <template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
                                  <div v-if="field.colType === 'button'">
                                  <h5>{{data.item.name}}</h5>
                                  <b-button>Am Button</b-button>
                                  </div>
                                  <div v-else-if="field.colType === 'span'">
                                  <h5>{{data.item.name}}</h5>
                                  <span>Am Span</span>
                                  </div>
                                  <div v-else>
                                  <h5>{{data.item.name}}</h5>
                                  Am Confused
                                  </div>
                                  </template>
                                  </b-table>
                                  </div>








                                  share|improve this answer




























                                    0














                                    You can check out this example for dynamic columns.






                                    new Vue({
                                    el: "#app",
                                    data: {
                                    fields: [{
                                    key: "id",
                                    label: "Id",
                                    colType: "span"
                                    }, {
                                    key: "name",
                                    label: "Name",
                                    colType: "button"
                                    }, {
                                    key: "uhh",
                                    label: "uhh..",
                                    colType: "idk"
                                    }],
                                    items: [{
                                    id: 0,
                                    name: "Test 0"
                                    }, {
                                    id: 1,
                                    name: "Test 1"
                                    }, {
                                    id: 2,
                                    name: "Test 2"
                                    }]
                                    }
                                    });

                                    <div id="app">
                                    <b-table :items="items" :fields="fields">
                                    <template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
                                    <div v-if="field.colType === 'button'">
                                    <h5>{{data.item.name}}</h5>
                                    <b-button>Am Button</b-button>
                                    </div>
                                    <div v-else-if="field.colType === 'span'">
                                    <h5>{{data.item.name}}</h5>
                                    <span>Am Span</span>
                                    </div>
                                    <div v-else>
                                    <h5>{{data.item.name}}</h5>
                                    Am Confused
                                    </div>
                                    </template>
                                    </b-table>
                                    </div>








                                    share|improve this answer


























                                      0












                                      0








                                      0







                                      You can check out this example for dynamic columns.






                                      new Vue({
                                      el: "#app",
                                      data: {
                                      fields: [{
                                      key: "id",
                                      label: "Id",
                                      colType: "span"
                                      }, {
                                      key: "name",
                                      label: "Name",
                                      colType: "button"
                                      }, {
                                      key: "uhh",
                                      label: "uhh..",
                                      colType: "idk"
                                      }],
                                      items: [{
                                      id: 0,
                                      name: "Test 0"
                                      }, {
                                      id: 1,
                                      name: "Test 1"
                                      }, {
                                      id: 2,
                                      name: "Test 2"
                                      }]
                                      }
                                      });

                                      <div id="app">
                                      <b-table :items="items" :fields="fields">
                                      <template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
                                      <div v-if="field.colType === 'button'">
                                      <h5>{{data.item.name}}</h5>
                                      <b-button>Am Button</b-button>
                                      </div>
                                      <div v-else-if="field.colType === 'span'">
                                      <h5>{{data.item.name}}</h5>
                                      <span>Am Span</span>
                                      </div>
                                      <div v-else>
                                      <h5>{{data.item.name}}</h5>
                                      Am Confused
                                      </div>
                                      </template>
                                      </b-table>
                                      </div>








                                      share|improve this answer













                                      You can check out this example for dynamic columns.






                                      new Vue({
                                      el: "#app",
                                      data: {
                                      fields: [{
                                      key: "id",
                                      label: "Id",
                                      colType: "span"
                                      }, {
                                      key: "name",
                                      label: "Name",
                                      colType: "button"
                                      }, {
                                      key: "uhh",
                                      label: "uhh..",
                                      colType: "idk"
                                      }],
                                      items: [{
                                      id: 0,
                                      name: "Test 0"
                                      }, {
                                      id: 1,
                                      name: "Test 1"
                                      }, {
                                      id: 2,
                                      name: "Test 2"
                                      }]
                                      }
                                      });

                                      <div id="app">
                                      <b-table :items="items" :fields="fields">
                                      <template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
                                      <div v-if="field.colType === 'button'">
                                      <h5>{{data.item.name}}</h5>
                                      <b-button>Am Button</b-button>
                                      </div>
                                      <div v-else-if="field.colType === 'span'">
                                      <h5>{{data.item.name}}</h5>
                                      <span>Am Span</span>
                                      </div>
                                      <div v-else>
                                      <h5>{{data.item.name}}</h5>
                                      Am Confused
                                      </div>
                                      </template>
                                      </b-table>
                                      </div>








                                      new Vue({
                                      el: "#app",
                                      data: {
                                      fields: [{
                                      key: "id",
                                      label: "Id",
                                      colType: "span"
                                      }, {
                                      key: "name",
                                      label: "Name",
                                      colType: "button"
                                      }, {
                                      key: "uhh",
                                      label: "uhh..",
                                      colType: "idk"
                                      }],
                                      items: [{
                                      id: 0,
                                      name: "Test 0"
                                      }, {
                                      id: 1,
                                      name: "Test 1"
                                      }, {
                                      id: 2,
                                      name: "Test 2"
                                      }]
                                      }
                                      });

                                      <div id="app">
                                      <b-table :items="items" :fields="fields">
                                      <template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
                                      <div v-if="field.colType === 'button'">
                                      <h5>{{data.item.name}}</h5>
                                      <b-button>Am Button</b-button>
                                      </div>
                                      <div v-else-if="field.colType === 'span'">
                                      <h5>{{data.item.name}}</h5>
                                      <span>Am Span</span>
                                      </div>
                                      <div v-else>
                                      <h5>{{data.item.name}}</h5>
                                      Am Confused
                                      </div>
                                      </template>
                                      </b-table>
                                      </div>





                                      new Vue({
                                      el: "#app",
                                      data: {
                                      fields: [{
                                      key: "id",
                                      label: "Id",
                                      colType: "span"
                                      }, {
                                      key: "name",
                                      label: "Name",
                                      colType: "button"
                                      }, {
                                      key: "uhh",
                                      label: "uhh..",
                                      colType: "idk"
                                      }],
                                      items: [{
                                      id: 0,
                                      name: "Test 0"
                                      }, {
                                      id: 1,
                                      name: "Test 1"
                                      }, {
                                      id: 2,
                                      name: "Test 2"
                                      }]
                                      }
                                      });

                                      <div id="app">
                                      <b-table :items="items" :fields="fields">
                                      <template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
                                      <div v-if="field.colType === 'button'">
                                      <h5>{{data.item.name}}</h5>
                                      <b-button>Am Button</b-button>
                                      </div>
                                      <div v-else-if="field.colType === 'span'">
                                      <h5>{{data.item.name}}</h5>
                                      <span>Am Span</span>
                                      </div>
                                      <div v-else>
                                      <h5>{{data.item.name}}</h5>
                                      Am Confused
                                      </div>
                                      </template>
                                      </b-table>
                                      </div>






                                      share|improve this answer












                                      share|improve this answer



                                      share|improve this answer










                                      answered Nov 20 '18 at 16:28









                                      nardnobnardnob

                                      416818




                                      416818






























                                          draft saved

                                          draft discarded




















































                                          Thanks for contributing an answer to Stack Overflow!


                                          • Please be sure to answer the question. Provide details and share your research!

                                          But avoid



                                          • Asking for help, clarification, or responding to other answers.

                                          • Making statements based on opinion; back them up with references or personal experience.


                                          To learn more, see our tips on writing great answers.




                                          draft saved


                                          draft discarded














                                          StackExchange.ready(
                                          function () {
                                          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386482%2fv-for-with-template%23new-answer', 'question_page');
                                          }
                                          );

                                          Post as a guest















                                          Required, but never shown





















































                                          Required, but never shown














                                          Required, but never shown












                                          Required, but never shown







                                          Required, but never shown

































                                          Required, but never shown














                                          Required, but never shown












                                          Required, but never shown







                                          Required, but never shown







                                          Popular posts from this blog

                                          android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

                                          SQL update select statement

                                          'app-layout' is not a known element: how to share Component with different Modules