显示具有 id 的数组中的特定数据答案

【问题标题】：Display specific data from array with id显示具有 id 的数组中的特定数据
【发布时间】：2021-06-27 16:55:22
【问题描述】：

我想像这个例子一样显示来自 Vuex 存储数组的数据，

<template>
    <div>
        <h1>{{this.$store.state.data.title}}</h1>
        <p>{{this.$store.state.data.text}}</p>
    </div>
</template>

但有一个 id 指定我将从数组中的哪个项目获取它。

有可能还是有替代方案？

【问题讨论】：

标签： vue.js vuejs2 vuex

【解决方案1】：

您可以使用 computed 属性：

 <template>
     <div>
        <h1>{{getTitle}}</h1>
        <p>{{getText}}</p>
     </div>
   </template>
<script>
export default {
    computed:{
        getTitle(){
            return this.$store.state.data.find(item => item.id === YOUR_ID).title
        },
        getText(){
            return this.$store.state.data.find(item => item.id === YOUR_ID).text
        }
    }
}
</script>

【讨论】：

【解决方案2】：

您可以使用 js 过滤器和 vue.js 计算属性来过滤表并根据 id 仅获取您想要的特定值。这是一个例子：

 <template>
     <div>
        <h1>{{mydata.data_title}}</h1>
        <p>{{mydata.data_description}}</p>
     </div>
   </template>
<script>
export default {
    computed:{
        mydata(){
            return {
             data_title: this.$store.state.data.filter(x=> x.id === 1).title,
             data_description: this.$store.state.data.filter(x=> x.id === 1).text
            }
        },
    }
}
</script>

【讨论】：

感谢您的回答！