[Vuejs]-Vue.js – show more objects from array if they have same title

by

0👍

Try to get the filtered array.

created() {
  this.selectedItem = arr.filter(item => item.name === 'anne');
  // arr is the array source variable.
}

 <div v-for="item in selectedItem" :key="item.id" class="essay">
   <p class="title" >{{ selectedItem.title }}</p>
   <p class="id">{{ selectedItem.id }}</p>
   <p class="name"> {{ selectedItem.name }} </p>
 </div>

0👍

I’ve made a snippet, maybe it would help You 🙂

We need to store state somewhere, so I’ve created owners variable with shown counter.

There is also a computed property that groups items by owners.

Maybe there is an easier method but…

new Vue({
  el: '#app',
  data: {
    items: [
      { owner: "John", name: "Box" },
      { owner: "John", name: "Keyboard" },
      { owner: "John", name: "Plate" },
      { owner: "Ann", name: "Flower" },
      { owner: "Ann", name: "Cup" }
    ],
    owners: {},
  },
  methods: {
    more(owner) {
      if (this.owners[owner].shown < this.items.filter(i => i.owner == owner).length) {
        this.owners[owner].shown++;
      }
    }
  },
  computed: {
    ownersItems() {
      let map = {};
      this.items.forEach(i => {
        map[i.owner] = map[i.owner] || [];
        if (this.owners[i.owner].shown > map[i.owner].length) {
          map[i.owner].push(i);
        }
      });
      return map;
    },
  },
  created() {
    let owners = {};
    this.items.forEach(i => {
      owners[i.owner] = owners[i.owner] || {};
      owners[i.owner].shown = 1;
    });
    this.owners = owners;
  }
})
#app {
  font-family: sans-serif;
  padding: 1rem;
}
.header {
  font-weight: bold;
  margin-bottom: .5rem;
}
sup {
  background: #000;
  color: #fff;
  border-radius: .15rem;
  padding: 1px 3px;
  font-size: 75%;
}
.btn {
  padding: .25rem .5rem;
  border: 1px solid #ddd;
  background: #eee;
  border-radius: .15rem;
  margin: 2px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="header">Owners</div>
  <template v-for="(cfg, owner) in owners">
    <strong>{{ owner }} <sup>{{cfg.shown}}</sup>:</strong>
    <a v-for="(item, i) in ownersItems[owner]" :key="`${owner}_${i}`" @click="more(owner)" class="btn">{{ item.name }}</a>
    |
  </template>
</div>

Leave a comment