Quasar:如何从数组对象中获取值?

乌尼

我想从数组对象中获取第一个value具有key:name的。代码quasar提供给我所有的vlauekeys何时被选中。

所以从上面的数据来看,我希望只被选中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>

感觉这是一件很小的事情,但遗憾的是我花了几个小时来解决这个问题..如果你让我知道如何解决这个问题,我将不胜感激!

时髦的莫希特

您可以使用地图方法

data.map(dessert => dessert.name)[0]

说明data.map()返回一个包含其回调返回值的列表,其中第一个参数是源中的迭代值(data此处)

然后我们可以选择迭代列表的第一个值(即ice creame sandwich

编辑:我看到了评论并相应地编辑了问题。您需要做的就是通过选择第一个索引像从数组中获取对象array[0],然后选择名称像array[0].name

这正是您所需要的:

Selected: {{ selected[0].name }} 

PS:希望你是初学者。我建议您至少参加 w3schools 上的 JavaScript 课程,并了解更多关于数组和对象的知识(我认为您已经了解 HTML 和 CSS)。为了将来参考,您可以搜索

如何获取javascript数组嵌套对象值

本来可以为您节省一个问题...

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章