如何在 VueJS 中使用过滤器获取数组的特定元素？答案

【问题标题】：How to get specific elements of array using filter in VueJS?如何在 VueJS 中使用过滤器获取数组的特定元素？
【发布时间】：2019-06-17 07:16:27
【问题描述】：

我正在尝试获得某个值；例如，如果我得到'works1'作为这个works_id，我想得到包含'works1'的元素作为works_id

 export default{
images: [{ works_id:'works1', 
        mother: require('@/assets/works/works1-0.png'), 
        children: [require('@/assets/works/works1-1.png')
        , require('@/assets/works/works1-2.png'), require('@/assets/works/works1-3.png'), require('@/assets/works/works1-4.png')]},
        { works_id:'works2',
        mother: require('@/assets/works/works2-0.png'), 
        children: [require('@/assets/works/works2-1.png')
        , require('@/assets/works/works2-2.png'), require('@/assets/works/works2-3.png'), require('@/assets/works/works2-4.png'), require('@/assets/works/works2-5.png')]}




]

}

  <template>
 <div class="deWorks">
    <div>
        <img :src="getWorksImgs.mother">
    </div>
    <div v-for="(Img , index) in getWorksImgs.children" :key="index">
        <img :src="Img">
    </div>
 </div>
  </template>

<script>
import StoreWorks from '@/store/works'

export default {
data(){
    return {
        worksImgs : StoreWorks.images,
        works_id: this.$route.params.works_id
    }   
},
    computed: {
    getWorksImgs(){
        let worksImgs = this.worksImgs
        // let works_id1 = this.$route.params.works_id
        worksImgs= worksImgs.filter(w => w.works_id === this.works_id )

        return worksImgs

    }
}
</script>

我在这里交叉发布了代码：

https://forum.vuejs.org/t/filter-help-trying-to-get-specific-elements-of-array-using-filter/54597

【问题讨论】：

请在另一个站点上添加一个指向您的副本的链接以指向这里，这样如果您首先在这里得到答案，另一个读者的时间不会浪费在重复的努力上。

标签： javascript arrays vue.js filter

【解决方案1】：

这是抛出一个错误，因为getWorksImgs() 返回的是一个数组，而不是一个对象。

<div>
    <img :src="getWorksImgs.mother">
</div>

由于上述相同的原因，下一部分也会抛出错误

<div v-for="(Img , index) in getWorksImgs.children" :key="index">
    <img :src="Img">
</div>

您需要在顶部 div 上移动 for 循环

 <div class="deWorks" v-for="(o, i) in getWorksImgs" :key="i">
    <div>
        <img :src="o.mother">
    </div>
    <div v-for="(Img , index) in o.children" :key="index">
        <img :src="Img">
    </div>
 </div>

【讨论】：

【解决方案2】：

getWorkImgs() 计算值会因为过滤器而返回一个数组。

    computed: {
      getWorksImgs() {
        return this.worksImgs.filter( w => w.works_id === this.works_id);
      }
    }

这应该可行：

    <template>
      <div class="wrapper">
        <div class="deWorks" v-for="(o, i) in getWorksImgs" :key="i">
          <div>
            <img :src="o.mother">
          </div>
          <div v-for="(Img , index) in o.children" :key="index">
            <img :src="Img">
          </div>
        </div>
      </div>
    </template>

    <script>
    import StoreWorks from '@/store/works'

    export default {
      data() {
        return {
          worksImgs: StoreWorks.images,
          works_id: this.$route.params.works_id
        }
      },
      computed: {
        getWorksImgs() {
          return this.worksImgs.filter( w => w.works_id === this.works_id);
        }
      }
    };
    </script>

【讨论】：