V-If Inside V-For - Display List of Items in Two Columns

V-if inside v-for - display list of items in two columns

What I would do is create a computed property dividing (or chunking) the items array into the appropriate number of columns.

Here's an example that uses a flexbox layout and one extra column element.

new Vue({  el: 'main',  data: {    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7'],    cols: 2  },  computed: {    columns () {      let columns = []      let mid = Math.ceil(this.items.length / this.cols)      for (let col = 0; col < this.cols; col++) {        columns.push(this.items.slice(col * mid, col * mid + mid))      }      return columns    }  }})

.container {  display: flex;  border: 1px solid;}.col {  margin: 10px;  border: 1px solid;  flex-grow: 1;  display: flex;  flex-direction: column;}.item-container {  border: 1px solid;  padding: 5px;  margin: 5px;}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script><main><p><label>Columns:<label> <input type="number" v-model="cols"></p><div class="container">  <div class="col" v-for="column in columns">    <div class="item-container" v-for="item in column">{{item}}</div>  </div></div></main>

v-for and v-if not working together in vue.js

You could also use JavaScript in your template to filter the array elements of the v-for. Instead of v-for="item in infos" you could narrow down the info-array to v-for="item in infos.filter(info => info.col === 'one')".

I renamed your info-array to infos to improve readability of my suggestion because of the usage of info in the callbacks.

<div class="row">
    <div class="col-md-6">
        <ol>
            <li v-for="item in infos.filter(info => info.col === 'one')">
                text: {{ item.text }}, col: {{ item.col }}
            </li>
        </ol>
    </div>
    <div class="col-md-6">
        <ol>
            <li v-for="item in infos.filter(info => info.col === 'two')">
                text: {{ item.text }}, col: {{ item.col }}
            </li>
        </ol>
    </div>
</div>

is there a way to break list into columns using VueJs?

You can use CSS to easily create columns. Just use a v-for to get the content on the screen then style it with CSS. In your case the loop will append multiple <div> elements. Here's an example of CSS columns.

This is the most basic solution where column-count: 3 splits the list into 3 equal columns.

.column_wrapper {  column-count: 3;}

<div class="column_wrapper">  <!-- results of <div v-for="item in list"></div>  -->  <div>Item 1</div>  <div>Item 2</div>  <div>Item 3</div>  <div>Item 4</div>  <div>Item 5</div>  <div>Item 6</div>  <div>Item 7</div>  <div>Item 8</div>  <div>Item 9</div>  <div>Item 10</div>  <div>Item 11</div>  <div>Item 12</div>  <div>Item 13</div>  <div>Item 14</div>  <div>Item 15</div></div>

v-if inside v-for shows all instances (Vue)

Use functions to manipulate the data and check if the id has been clicked.

<div v-for="user_leav in user_leave_filtered" v-bind:key="user_leav.id">
  <div class="container">
    <div v-if="user_leav.note" v-on:click="toggle(user_leav)">
      <h4>Note</h4>
    </div>
    <div class="note" v-if="checkNote(user_leav.id)">
      <p>{{ user_leav.note }} </p>
    </div>
  </div>
</div>

And then add add and remove items from an array and check against that array.

data () {
    return {
      showNote: []
    }
  },   
methods: {
  toggle: function (userLeavePassed) {
    if (this.showNote.includes(userLeavePassed.id)) {
      var index = this.showNote.indexOf(userLeavePassed.id)
      if (index > -1) {
        this.showNote.splice(index, 1)
      }
    } else {
      this.showNote.push(userLeavePassed.id)
    }
  },
  checkNote: function(notePassed) {
    if (this.showNote.includes(notePassed)) {
      return true
    } else {
      return false
    }
  }
}

vuejs: Split in columns a list of items

<v-checkbox
  v-for="item in items.slice(0, 4)"
  :key="item._id"
  :label="item.name"
  :value="item._id"
></v-checkbox>

<div v-if="items.size > 4"> 
  <v-checkbox
    v-for="item in items.slice(5, items.size)"
    :key="item._id"
    :label="item.name"
    :value="item._id"
 ></v-checkbox>
</div>

And you add styling to both the v-checkboxes to display them in columns with the grid system. If you need more columns you just slice again from 5 to 8, etc.

using a v-if inside a v-for

The code you have should be fine.

It is not recommended to use v-for and v-if on the same node. For example, if you had this, that is not recommended:

<tr v-for="(dataset, i) in dataSetA" :key="i" v-if="checkIfSame(dataset['id']) == true">
    <td>etc.</td>
</tr>

The reason being that v-for has a higher precedence than v-if. In that case, better to use a computed property to return the filtered list.

What you have in your example is:

<topLevelEl v-for="i in z">
    <childEl v-if="i === 2">
        It's two!
    </childEl>
    <childEl v-else>
        It's not two.
    </childEl>
</topLevelEl>

The v-if and v-for are not on the same node here. v-if is on childEl and v-for is on topLevelEl. This is fine. Anything except the node with v-for on is fine. You can still use it on the same HTML tag again if it's nested within, so for example if you had topLevelEl nested again inside, you're still free to use it on that, too.

Is it possible to create a grid layout in a list?

generally with the use of v-row and v-col you can implement a layout and this is true inside of a v-list-item-content, for example check the code below (I'm not sure if I understood the layout you've asked for correctly or not but it must give you a hint)

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    items: [{
        t: 'title one',
        n: 1
      },
      {
        t: 'title two',
        n: 2
      },
      {
        t: 'title three',
        n: 3
      },
      {
        t: 'title four',
        n: 4
      },
    ],
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-list dense>
          <template v-for="(item, index) in items">
            <v-list-item :key="item.n">
              <v-list-item-content class="font-weight-bold">
                <v-row>
                  <v-col cols="6">
                    <v-row no-gutters justify="end">{{ item.n }}</v-row>
                  </v-col>
                  
                  <v-col cols="6">
                    <v-row no-gutters>{{ item.t }}</v-row>
                  </v-col>
                </v-row>
              </v-list-item-content>
            </v-list-item>
            <v-divider :key="`divider-${item.n}`"></v-divider>
          </template>
        </v-list>
      </v-container>
    </v-main>
  </v-app>
</div>

---

Related Topics