javascript - Quasar:如何从数组对象中获取值?
问题描述
我想从数组对象中获取第一个value
具有key
:的。name
代码quasar
提供了所有信息vlaue
以及keys
何时选择它。
所以从上面的数据中,我希望只选择 selected value
。
我尝试了Object.value()
、JSON.stringify()
和localStorage.setItem()
,但没有看到我想要的。
这是来自的基本示例Quasar
模板:
<template>
<div class="q-pa-md">
<q-table
title="Treats"
:data="data"
:columns="columns"
row-key="name"
:selected-rows-label="getSelectedString"
selection="multiple"
:selected.sync="selected"
/>
<div class="q-mt-md">
Selected: {{ JSON.stringify(selected) }}
<!-- Original Result :
Selected: [{"name":"Ice cream sandwich", "calories":237,
"fat":9, "carbs":37, "protein":4.3, "sodium":129,
"calcium":"8%",
-->
<!-- Desired Result :
Selected: *Value I Selected without [{}]*
-->
</div>
</div>
</template>
脚本:
<script>
export default {
data () {
return {
selected: [],
columns: [
{
name: 'desc',
required: true,
label: 'Dessert (100g serving)',
align: 'left',
field: row => row.name,
format: val => `${val}`,
sortable: true
},
{ name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
],
data: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
sodium: 87,
calcium: '14%',
iron: '1%'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
sodium: 129,
calcium: '8%',
iron: '1%'
},
]
}
},
methods: {
getSelectedString () {
// I also thought I may need to use this function,
// but have no idea how to approach..
return this.selected.length === 0 ? '' : `${this.selected.length} record${this.selected.length > 1 ? 's' : ''} selected of ${this.data.length}`
}
}
}
</script>
感觉这是一件微不足道的事情,但遗憾的是我花了几个小时来解决这个问题。如果你让我知道如何解决这个问题,我将不胜感激!
解决方案
你可以使用 map 方法
data.map(dessert => dessert.name)[0]
解释:data.map()
返回一个列表,其回调的返回值,其中第一个参数是源中的迭代值(data
这里)
然后我们可以选择迭代列表的第一个值(即ice creame sandwich
)
编辑:我看到了评论并相应地编辑了问题。您需要做的就是通过选择第一个索引 like 从数组中获取对象array[0]
,然后选择名称 likearray[0].name
这正是您需要的:
Selected: {{ selected[0].name }}
PS:我希望你是一个初学者。我建议你至少参加 w3schools 的 JavaScript 课程,并了解更多关于数组和对象的知识(我想你已经了解 HTML 和 CSS)。为了将来参考,您可以搜索
如何获取javascript数组嵌套对象值
本来可以为您节省一个问题...
推荐阅读
- javascript - 如何从redis键值获取数据并推送到数组?
- node.js - 如何向 Discord API 发出 HTTP 请求?
- javascript - 如何将粘性标题添加到具有下拉过滤器作为标题的引导表?
- json - Symfony FOS 休息包没有从 API url 获取我的 json 数据
- reactjs - 如何测试 React-Redux???(useSelector)
- c# - 绑定到子视图模型组合框对象内的枚举不会在 UI 上呈现
- flutter - StreamBuilder - 错误状态:在一个屏幕上使用多个 StreamBuilder
- python - 使用 CNN 的多类图像分类
- android-architecture-components - 带有导航架构组件导航但重叠底部导航视图的片段内的底部导航视图
- angular - 无效的请求正文 - IBM MobileFirst 8.0 中 WLAuthorizationManager.obtainAccessToken 的 JSON 映射失败