Vue.js - 如果它们具有相同的标题，则显示更多来自数组的对象答案

【问题标题】：Vue.js - show more objects from array if they have same titleVue.js - 如果它们具有相同的标题，则显示更多来自数组的对象
【发布时间】：2020-10-22 09:39:54
【问题描述】：

我有一个对象数组：

[{ 
   title: 'foo'
   id: 1,
   name: 'anne'
 },
  
 { 
   title: 'example',
   id: 2,
   name: 'anne'
 },
 { 
   title: 'ex',
   id: 3,
   name: 'deb'
 }]

页面已经显示了第一个对象：

{ 
   title: 'foo'
   id: 1,
   name: 'anne'
 },
 
 <div class="essay">
   <p class="title" >{{ selectedItem.title }}</p>
   <p class="id">{{ selectedItem.id }}</p>
   <p class="name"> {{ selectedItem.name }} </p>
 </div>

selectedItem来自created()生命周期

显示同名对象的最佳方式是什么？

我想要一个按钮，如果单击该按钮，将显示来自人名'anne' 的另一个标题。

【问题讨论】：

页面已经显示了第一个对象你是怎么做到的？
请为显示一个对象的组件添加代码，我可以理解问题
完成，如果需要更多信息请告诉我

标签： arrays vue.js

【解决方案1】：

尝试获取过滤后的数组。

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>

【讨论】：

【解决方案2】：

我做了一个sn-p，也许对你有帮助:-)

我们需要在某处存储状态，所以我用shown 计数器创建了owners 变量。

还有一个计算属性按所有者对项目进行分组。

也许有更简单的方法，但是...

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>

【讨论】：