[Vuejs]-To display dynamic JSON data in 2 different div's

by

2👍

✅

Another option: https://jsfiddle.net/kth61cLu/1/

<div id="app">
    <h3>Users</h3>
    <div class="users1">
        <div v-for="(user, index) in users" v-if="index < 3">
             <p>{{user.name}}</p>
        </div>
    </div>
    <div v-if="users.length > 3" class="users2">
        <div v-for="(user, index) in users" v-if="index > 3">
             <p>{{user.name}}</p>
        </div>
    </div>
</div>
👤Waseem Ansar

3👍

Vue is convenient to accomplish such tasks.
You need another two computed properties based on users.
template:

<div>{{left}}</div>
<div>{{right}}</div>

computed: {
    left: function(){
        return this.users.slice(0, 3);
    },
    reight: function() {
        return this.users.slice(3);
    }
}
👤krave

2👍

Create a computed property that splits your array into two with the first having three elements and the second having the rest.

Then loop over the splitUsers array to display.

new Vue({
  el: '#app',
  data: {
    users: [{"name":"User 1"},{"name":"User 2"},{"name":"User 3"},{"name":"User 4"},{"name":"User 5"},{"name":"User 6"}]
  },
  computed: {
    splitUsers () {
      const split = [ this.users.slice(0, 3) ]
      if (this.users.length > 3) {
        split.push(this.users.slice(3))
      }
      return split
    }
  }
})
#app { display: flex; }
#app div { padding: 1rem; border: 1px solid black; }
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <div v-for="chunk in splitUsers">
    <p v-for="user in chunk">{{ user.name }}</p>
  </div>
</div>
👤Phil

0👍

OK, here is what you can try.

<h3>Users</h3>
<div  v-for="(user) in users.slice(0,3)">
   <p>{{user.name}}</p>
</div>
<div  v-for="(user) in users.slice(3)">
    <p>{{user.name}}</p>
</div>

Hope it helps!

👤Dhruv Patel

Leave a comment