如何在对象数组中查找具有特定名称的值

Posted 2023-02-16

【中文标题】如何在对象数组中查找具有特定名称的值

【英文标题】：How to find a value with a specific name in an array of object

【发布时间】：2021-10-01 02:59:47

【问题描述】：

我正在尝试从从 API 请求获得的对象数组中查找值：

我正在使用 Vue2

我有一个这样的数据集：

content:[
    
        name: title1,
        value: value1
    ,
    
         name: title2,
         value: value2
    ,
...
]

我想获得一个值，以便在我的模板中像这样使用它

<p> value with the name title2 </p>

有人知道怎么做吗？

【参考方案1】：

你可以使用计算，然后把它放在模板中：

computed: 
    title2 () 
       return this.content.filter(e => e.name === 'title2')
    

ps：这将在列表中的 dom 中显示您的对象。

如果你只想要名字，你可以这样做：

computed: 
    title2 () 
       const title = this.content.filter(e => e.name === 'title2')
       return title[0].name
    

【讨论】：

主要问题是我可能需要在 1 个视图上获取 100 个值，所以我需要这样做 100 次

你能在你的问题中添加更多细节吗？解释更多，以便我们提供更好的答案

我想做一个简单的内容修饰符。在我的后台，我有“标题段落”之类的内容标题。在我的主页视图中，我正在执行 API 请求以获取所有内容。我想显示标题为“标题段落”的内容的值。我不知道这是否清楚。

我不确定我是否清楚地理解了这一点，但我得到了什么：你可以像这样修改过滤器 e => e.name === this.header-paragraph ?

如果我试图从标题中获取内容的值。我想做这样的事情：e => e.name === "header-parahraph" 并获得标题为 header-paraprah 的值

【参考方案2】：

你可以使用内置的Array find prototype

<p> content.find(e => e.name === 'title2').value </p>

已编辑如何设置内容值

您可以声明内容变量以将您的 API 数据存储在数据部分：

data() 
  return 
    content: []
  

调用API并为变量设置值：

 created() 
    axios.get(url)
    .then(response => 
     
      this.content = response.data; 
    )
  

【讨论】：

谢谢！以及如何获得此内容的价值？

我已经更新了我的答案。可以在data中声明内容

所以我可以做这样的事情：

是的，当然。但是现在，您的模板看起来有点复杂，因为您向其中添加了太多代码。让我们声明一个计算值并使用

所以我需要在计算上做过滤器？