Quasar：如何从数组对象中获取值？

Question

我想从数组对象中获取第一个 value，其中包含 key:name。代码 quasar 提供给我所有的 vlaue 和 keys 选择时。

所以根据上面的数据，我希望只选择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>

感觉这是一件小事，但遗憾的是我花了几个小时在这上面..如果你能告诉我如何解决这个问题，我将不胜感激！

Answer 1

你要映射吗？

var data = [ {name: "AA"}, {name: "BB"}]:
var result =  data.map( (ob) => { return ob.name; });
// result contains ["AA", "BB"]
var result2 =  result.join(", ")
// result2 contains "AA, BB"

data[0].name // returns AA

Answer 2

你可以使用地图方法

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

说明: data.map() return是一个列表，其回调的return值为第一个参数为迭代值在源代码中（data 此处）

然后我们可以select迭代列表的第一个值（即ice creame sandwich）

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

这样的名称

这正是您所需要的：

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

PS：希望你是初学者。我建议你至少上一门关于 w3schools 的 JavaScript 课程，并学习更多关于数组和对象的知识（我想你已经知道 HTML 和 CSS）。为了将来参考，您可以搜索

how to get javascript array nested object value

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

Quasar：如何从数组对象中获取值？

Quasar: How to get a value from an array object?

javascript

vue.js

quasar-framework