v-for render or dont render on x iteration Unicorn Meta Zoo #1: Why another podcast? Announcing the arrival of Valued Associate #679: Cesar Manara Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!What is the best way to iterate over a dictionary?What is the “right” way to iterate through an array in Ruby?What is the most “pythonic” way to iterate over a list in chunks?Why is using “for…in” with array iteration a bad idea?Iterate through a HashMapHow to determine the first and last iteration in a foreach loop?How do I iterate over a JSON structure?Iterate through object propertiesHow to Iterate over a Set/HashSet without an Iterator?Ways to iterate over a list in Java

Trumpet valves, lengths, and pitch

As an international instructor, should I openly talk about my accent?

All ASCII characters with a given bit count

What is /etc/mtab in Linux?

PIC mathematical operations weird problem

Book with legacy programming code on a space ship that the main character hacks to escape

Putting Ant-Man on house arrest

"My boss was furious with me and I have been fired" vs. "My boss was furious with me and I was fired"

How to find the right literary agent in the USA?

Are these square matrices always diagonalisable?

Password Generator in batch

What is it called when you ride around on your front wheel?

How to count in linear time worst-case?

Justification for leaving new position after a short time

Could moose/elk survive in the Amazon forest?

What is the ongoing value of the Kanban board to the developers as opposed to management

Has a Nobel Peace laureate ever been accused of war crimes?

How to not starve gigantic beasts

Error: Syntax error. Missing ')' for CASE Statement

Why didn't the Space Shuttle bounce back into space as many times as possible so as to lose a lot of kinetic energy up there?

What do you call the part of a novel that is not dialog?

Does Mathematica have an implementation of the Poisson Binomial Distribution?

Visa-free travel to the US using refugee travel document from Spain?

Multiple fireplaces in an apartment building?



v-for render or dont render


on x iteration
Unicorn Meta Zoo #1: Why another podcast?
Announcing the arrival of Valued Associate #679: Cesar Manara
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!What is the best way to iterate over a dictionary?What is the “right” way to iterate through an array in Ruby?What is the most “pythonic” way to iterate over a list in chunks?Why is using “for…in” with array iteration a bad idea?Iterate through a HashMapHow to determine the first and last iteration in a foreach loop?How do I iterate over a JSON structure?Iterate through object propertiesHow to Iterate over a Set/HashSet without an Iterator?Ways to iterate over a list in Java



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








0















I did not find solution to my question anywhere and I can't figure it out. I have divs like this



<div class="columns">
<div class="column">
looping content here
</div>
</div


Data is something like this:




title: 'blabla'
body: 'blabla'
msg: 'blabla"



For responsive purposes I need 3 columns max side by side and then start another columns container that will stack columns underneath. So 3 column divs inside columns container and then create another columns div with 3 column divs inside and go until the array is empty.



I have tried computed count property but don't know how to iterate it inside of v-for. Also tried v-if but it didnt work as planned :(



Is it even possible in v-for? I dont know what approach to take to be honest.










share|improve this question




























    0















    I did not find solution to my question anywhere and I can't figure it out. I have divs like this



    <div class="columns">
    <div class="column">
    looping content here
    </div>
    </div


    Data is something like this:




    title: 'blabla'
    body: 'blabla'
    msg: 'blabla"



    For responsive purposes I need 3 columns max side by side and then start another columns container that will stack columns underneath. So 3 column divs inside columns container and then create another columns div with 3 column divs inside and go until the array is empty.



    I have tried computed count property but don't know how to iterate it inside of v-for. Also tried v-if but it didnt work as planned :(



    Is it even possible in v-for? I dont know what approach to take to be honest.










    share|improve this question
























      0












      0








      0








      I did not find solution to my question anywhere and I can't figure it out. I have divs like this



      <div class="columns">
      <div class="column">
      looping content here
      </div>
      </div


      Data is something like this:




      title: 'blabla'
      body: 'blabla'
      msg: 'blabla"



      For responsive purposes I need 3 columns max side by side and then start another columns container that will stack columns underneath. So 3 column divs inside columns container and then create another columns div with 3 column divs inside and go until the array is empty.



      I have tried computed count property but don't know how to iterate it inside of v-for. Also tried v-if but it didnt work as planned :(



      Is it even possible in v-for? I dont know what approach to take to be honest.










      share|improve this question














      I did not find solution to my question anywhere and I can't figure it out. I have divs like this



      <div class="columns">
      <div class="column">
      looping content here
      </div>
      </div


      Data is something like this:




      title: 'blabla'
      body: 'blabla'
      msg: 'blabla"



      For responsive purposes I need 3 columns max side by side and then start another columns container that will stack columns underneath. So 3 column divs inside columns container and then create another columns div with 3 column divs inside and go until the array is empty.



      I have tried computed count property but don't know how to iterate it inside of v-for. Also tried v-if but it didnt work as planned :(



      Is it even possible in v-for? I dont know what approach to take to be honest.







      loops vue.js render v-for






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Mar 9 at 6:14









      powajojpowajoj

      52




      52






















          2 Answers
          2






          active

          oldest

          votes


















          0














          Why not just insert each column inside a single columns container and then use CSS to wrap to a new row every 3 columns. The added benefit of this is that you can adjust the number of columns that appear in each row with media queries.



          Try running the snippet below in full screen and the resize the browser to less than 576px wide to see the responsive columns.






          new Vue(
          el: '#app',
          data ()
          return
          columns: [

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'

          ]


          )

          .columns 
          display: flex;
          flex-wrap: wrap;


          .column
          box-sizing: border-box;
          padding: 1em;
          width: 33.3%;


          /* on devices smaller than 576px, stack columns */
          @media (max-width: 576px)
          .column
          width: 100%;


          <script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
          <div id="app">
          <div class="columns">
          <div v-for="(column, index) in columns" class="column" :key="index">
          <h2> column.title </h2>
          <p> column.body </p>
          <strong> column.msg </strong>
          </div>
          </div>
          </div>








          share|improve this answer

























          • Wow, why didnt I think of doing it with CSS? This works brilliantly. Thank you.

            – powajoj
            Mar 9 at 10:38


















          0














          It's possible to nest v-for loops if the data is correctly formatted.

          For example, an array (for the first v-for) of objects (for the second loop):






          new Vue(
          el: "#app",
          data()
          return
          items: [

          title: 'Title 1',
          body: 'body 1',
          msg: 'message 1'
          ,

          title: 'Title 2',
          body: 'body 2',
          msg: 'message 2'

          ]


          )

          .columns 
          align-items: center;
          display: flex;
          height: 40px;
          justify-content: space-around;
          width: 50%;

          <script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
          <div id="app">
          <div class="columns" v-for="item in items">
          <div class="column" v-for="(value, key) in item">
          <div> value </div>
          </div>
          </div>
          </div>








          share|improve this answer























          • Your code works and I'm currently trying to adjust it as yours makes 3 columns (col1 - title 1, col 2- body 1, col 3 - message 1) and then makes another div of 3 columns. Thats a lot closer to the solution I need but it's not quite it. I need to restructure data so i can have (col1 - title1, body 1, message1, col 2-> t1,b1,m1..etc to col3 then new group.

            – powajoj
            Mar 9 at 10:21











          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%2f55074582%2fv-for-render-or-dont-render-div-on-x-iteration%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          2 Answers
          2






          active

          oldest

          votes








          2 Answers
          2






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          Why not just insert each column inside a single columns container and then use CSS to wrap to a new row every 3 columns. The added benefit of this is that you can adjust the number of columns that appear in each row with media queries.



          Try running the snippet below in full screen and the resize the browser to less than 576px wide to see the responsive columns.






          new Vue(
          el: '#app',
          data ()
          return
          columns: [

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'

          ]


          )

          .columns 
          display: flex;
          flex-wrap: wrap;


          .column
          box-sizing: border-box;
          padding: 1em;
          width: 33.3%;


          /* on devices smaller than 576px, stack columns */
          @media (max-width: 576px)
          .column
          width: 100%;


          <script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
          <div id="app">
          <div class="columns">
          <div v-for="(column, index) in columns" class="column" :key="index">
          <h2> column.title </h2>
          <p> column.body </p>
          <strong> column.msg </strong>
          </div>
          </div>
          </div>








          share|improve this answer

























          • Wow, why didnt I think of doing it with CSS? This works brilliantly. Thank you.

            – powajoj
            Mar 9 at 10:38















          0














          Why not just insert each column inside a single columns container and then use CSS to wrap to a new row every 3 columns. The added benefit of this is that you can adjust the number of columns that appear in each row with media queries.



          Try running the snippet below in full screen and the resize the browser to less than 576px wide to see the responsive columns.






          new Vue(
          el: '#app',
          data ()
          return
          columns: [

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'

          ]


          )

          .columns 
          display: flex;
          flex-wrap: wrap;


          .column
          box-sizing: border-box;
          padding: 1em;
          width: 33.3%;


          /* on devices smaller than 576px, stack columns */
          @media (max-width: 576px)
          .column
          width: 100%;


          <script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
          <div id="app">
          <div class="columns">
          <div v-for="(column, index) in columns" class="column" :key="index">
          <h2> column.title </h2>
          <p> column.body </p>
          <strong> column.msg </strong>
          </div>
          </div>
          </div>








          share|improve this answer

























          • Wow, why didnt I think of doing it with CSS? This works brilliantly. Thank you.

            – powajoj
            Mar 9 at 10:38













          0












          0








          0







          Why not just insert each column inside a single columns container and then use CSS to wrap to a new row every 3 columns. The added benefit of this is that you can adjust the number of columns that appear in each row with media queries.



          Try running the snippet below in full screen and the resize the browser to less than 576px wide to see the responsive columns.






          new Vue(
          el: '#app',
          data ()
          return
          columns: [

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'

          ]


          )

          .columns 
          display: flex;
          flex-wrap: wrap;


          .column
          box-sizing: border-box;
          padding: 1em;
          width: 33.3%;


          /* on devices smaller than 576px, stack columns */
          @media (max-width: 576px)
          .column
          width: 100%;


          <script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
          <div id="app">
          <div class="columns">
          <div v-for="(column, index) in columns" class="column" :key="index">
          <h2> column.title </h2>
          <p> column.body </p>
          <strong> column.msg </strong>
          </div>
          </div>
          </div>








          share|improve this answer















          Why not just insert each column inside a single columns container and then use CSS to wrap to a new row every 3 columns. The added benefit of this is that you can adjust the number of columns that appear in each row with media queries.



          Try running the snippet below in full screen and the resize the browser to less than 576px wide to see the responsive columns.






          new Vue(
          el: '#app',
          data ()
          return
          columns: [

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'

          ]


          )

          .columns 
          display: flex;
          flex-wrap: wrap;


          .column
          box-sizing: border-box;
          padding: 1em;
          width: 33.3%;


          /* on devices smaller than 576px, stack columns */
          @media (max-width: 576px)
          .column
          width: 100%;


          <script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
          <div id="app">
          <div class="columns">
          <div v-for="(column, index) in columns" class="column" :key="index">
          <h2> column.title </h2>
          <p> column.body </p>
          <strong> column.msg </strong>
          </div>
          </div>
          </div>








          new Vue(
          el: '#app',
          data ()
          return
          columns: [

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'

          ]


          )

          .columns 
          display: flex;
          flex-wrap: wrap;


          .column
          box-sizing: border-box;
          padding: 1em;
          width: 33.3%;


          /* on devices smaller than 576px, stack columns */
          @media (max-width: 576px)
          .column
          width: 100%;


          <script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
          <div id="app">
          <div class="columns">
          <div v-for="(column, index) in columns" class="column" :key="index">
          <h2> column.title </h2>
          <p> column.body </p>
          <strong> column.msg </strong>
          </div>
          </div>
          </div>





          new Vue(
          el: '#app',
          data ()
          return
          columns: [

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
          ,

          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'

          ]


          )

          .columns 
          display: flex;
          flex-wrap: wrap;


          .column
          box-sizing: border-box;
          padding: 1em;
          width: 33.3%;


          /* on devices smaller than 576px, stack columns */
          @media (max-width: 576px)
          .column
          width: 100%;


          <script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
          <div id="app">
          <div class="columns">
          <div v-for="(column, index) in columns" class="column" :key="index">
          <h2> column.title </h2>
          <p> column.body </p>
          <strong> column.msg </strong>
          </div>
          </div>
          </div>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Mar 9 at 10:30

























          answered Mar 9 at 10:24









          camaulaycamaulay

          915




          915












          • Wow, why didnt I think of doing it with CSS? This works brilliantly. Thank you.

            – powajoj
            Mar 9 at 10:38

















          • Wow, why didnt I think of doing it with CSS? This works brilliantly. Thank you.

            – powajoj
            Mar 9 at 10:38
















          Wow, why didnt I think of doing it with CSS? This works brilliantly. Thank you.

          – powajoj
          Mar 9 at 10:38





          Wow, why didnt I think of doing it with CSS? This works brilliantly. Thank you.

          – powajoj
          Mar 9 at 10:38













          0














          It's possible to nest v-for loops if the data is correctly formatted.

          For example, an array (for the first v-for) of objects (for the second loop):






          new Vue(
          el: "#app",
          data()
          return
          items: [

          title: 'Title 1',
          body: 'body 1',
          msg: 'message 1'
          ,

          title: 'Title 2',
          body: 'body 2',
          msg: 'message 2'

          ]


          )

          .columns 
          align-items: center;
          display: flex;
          height: 40px;
          justify-content: space-around;
          width: 50%;

          <script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
          <div id="app">
          <div class="columns" v-for="item in items">
          <div class="column" v-for="(value, key) in item">
          <div> value </div>
          </div>
          </div>
          </div>








          share|improve this answer























          • Your code works and I'm currently trying to adjust it as yours makes 3 columns (col1 - title 1, col 2- body 1, col 3 - message 1) and then makes another div of 3 columns. Thats a lot closer to the solution I need but it's not quite it. I need to restructure data so i can have (col1 - title1, body 1, message1, col 2-> t1,b1,m1..etc to col3 then new group.

            – powajoj
            Mar 9 at 10:21















          0














          It's possible to nest v-for loops if the data is correctly formatted.

          For example, an array (for the first v-for) of objects (for the second loop):






          new Vue(
          el: "#app",
          data()
          return
          items: [

          title: 'Title 1',
          body: 'body 1',
          msg: 'message 1'
          ,

          title: 'Title 2',
          body: 'body 2',
          msg: 'message 2'

          ]


          )

          .columns 
          align-items: center;
          display: flex;
          height: 40px;
          justify-content: space-around;
          width: 50%;

          <script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
          <div id="app">
          <div class="columns" v-for="item in items">
          <div class="column" v-for="(value, key) in item">
          <div> value </div>
          </div>
          </div>
          </div>








          share|improve this answer























          • Your code works and I'm currently trying to adjust it as yours makes 3 columns (col1 - title 1, col 2- body 1, col 3 - message 1) and then makes another div of 3 columns. Thats a lot closer to the solution I need but it's not quite it. I need to restructure data so i can have (col1 - title1, body 1, message1, col 2-> t1,b1,m1..etc to col3 then new group.

            – powajoj
            Mar 9 at 10:21













          0












          0








          0







          It's possible to nest v-for loops if the data is correctly formatted.

          For example, an array (for the first v-for) of objects (for the second loop):






          new Vue(
          el: "#app",
          data()
          return
          items: [

          title: 'Title 1',
          body: 'body 1',
          msg: 'message 1'
          ,

          title: 'Title 2',
          body: 'body 2',
          msg: 'message 2'

          ]


          )

          .columns 
          align-items: center;
          display: flex;
          height: 40px;
          justify-content: space-around;
          width: 50%;

          <script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
          <div id="app">
          <div class="columns" v-for="item in items">
          <div class="column" v-for="(value, key) in item">
          <div> value </div>
          </div>
          </div>
          </div>








          share|improve this answer













          It's possible to nest v-for loops if the data is correctly formatted.

          For example, an array (for the first v-for) of objects (for the second loop):






          new Vue(
          el: "#app",
          data()
          return
          items: [

          title: 'Title 1',
          body: 'body 1',
          msg: 'message 1'
          ,

          title: 'Title 2',
          body: 'body 2',
          msg: 'message 2'

          ]


          )

          .columns 
          align-items: center;
          display: flex;
          height: 40px;
          justify-content: space-around;
          width: 50%;

          <script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
          <div id="app">
          <div class="columns" v-for="item in items">
          <div class="column" v-for="(value, key) in item">
          <div> value </div>
          </div>
          </div>
          </div>








          new Vue(
          el: "#app",
          data()
          return
          items: [

          title: 'Title 1',
          body: 'body 1',
          msg: 'message 1'
          ,

          title: 'Title 2',
          body: 'body 2',
          msg: 'message 2'

          ]


          )

          .columns 
          align-items: center;
          display: flex;
          height: 40px;
          justify-content: space-around;
          width: 50%;

          <script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
          <div id="app">
          <div class="columns" v-for="item in items">
          <div class="column" v-for="(value, key) in item">
          <div> value </div>
          </div>
          </div>
          </div>





          new Vue(
          el: "#app",
          data()
          return
          items: [

          title: 'Title 1',
          body: 'body 1',
          msg: 'message 1'
          ,

          title: 'Title 2',
          body: 'body 2',
          msg: 'message 2'

          ]


          )

          .columns 
          align-items: center;
          display: flex;
          height: 40px;
          justify-content: space-around;
          width: 50%;

          <script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
          <div id="app">
          <div class="columns" v-for="item in items">
          <div class="column" v-for="(value, key) in item">
          <div> value </div>
          </div>
          </div>
          </div>






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Mar 9 at 9:42









          SovalinaSovalina

          3,53541027




          3,53541027












          • Your code works and I'm currently trying to adjust it as yours makes 3 columns (col1 - title 1, col 2- body 1, col 3 - message 1) and then makes another div of 3 columns. Thats a lot closer to the solution I need but it's not quite it. I need to restructure data so i can have (col1 - title1, body 1, message1, col 2-> t1,b1,m1..etc to col3 then new group.

            – powajoj
            Mar 9 at 10:21

















          • Your code works and I'm currently trying to adjust it as yours makes 3 columns (col1 - title 1, col 2- body 1, col 3 - message 1) and then makes another div of 3 columns. Thats a lot closer to the solution I need but it's not quite it. I need to restructure data so i can have (col1 - title1, body 1, message1, col 2-> t1,b1,m1..etc to col3 then new group.

            – powajoj
            Mar 9 at 10:21
















          Your code works and I'm currently trying to adjust it as yours makes 3 columns (col1 - title 1, col 2- body 1, col 3 - message 1) and then makes another div of 3 columns. Thats a lot closer to the solution I need but it's not quite it. I need to restructure data so i can have (col1 - title1, body 1, message1, col 2-> t1,b1,m1..etc to col3 then new group.

          – powajoj
          Mar 9 at 10:21





          Your code works and I'm currently trying to adjust it as yours makes 3 columns (col1 - title 1, col 2- body 1, col 3 - message 1) and then makes another div of 3 columns. Thats a lot closer to the solution I need but it's not quite it. I need to restructure data so i can have (col1 - title1, body 1, message1, col 2-> t1,b1,m1..etc to col3 then new group.

          – powajoj
          Mar 9 at 10:21

















          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%2f55074582%2fv-for-render-or-dont-render-div-on-x-iteration%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

          1928 у кіно

          Захаров Федір Захарович

          Ель Греко