在vuetify中显示嵌套数据

debugcn 发表于 Dev

埃德森·特里亚肯

大家好，新编码器在这里...只需要一些帮助。

我想在具有vuetify的vue中显示嵌套数据

这是我的数据：

{
    "data": [
        {
            "id": 1,
            "customer": {
                "id": 88,
                "name": "David Zulauf III",
                "mobile": "240-545-5366 x7059"
            },
            "item": "rau",
            "qty": "4",
            "fit": {
                "name": "fourth"
            },
            "shop": "Metz, Cole and McKenzie"
        },
    ],
}

我正在使用Laravel作为后端。不确定合适的术语，但我使用Laravel资源功能在某种程度上将我的表关联在一起，这就是为什么我得到此嵌套数据的原因。

这是我的vue文件，我使用了vuetify数据表来显示上述数据

<script>
  export default {
    data () {
      return {
        search: '',
        dialog: false,
        edit:false,
        items:[],
        headers: [
          {text: 'customer',align: 'start',sortable: false,value: 'customer',},
          { text: 'item', value: 'item' },
          { text: 'qty', value: 'qty' },
          { text: 'fit', value: 'fit' },
          { text: 'shop', value: 'shop' },
        ],
      }
    },
    created(){
      this.fetchItems();
    },
    methods: {
        fetchItems(){
          axios.get('api/item')
          .then(res=>{
            this.items = res.data.data;
          });
        }
      }
  }
</script>
<template>
  <v-card>
    <v-card-title>
      Items
      <v-spacer></v-spacer>
      <v-btn depressed color="primary" @click="addNew"> ADD</v-btn>
      <v-spacer></v-spacer>
      <v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table :headers="headers" :items="items" :search="search"></v-data-table>
  </v-card>

</template>

谢谢您的帮助。

布萨吉拉·卜拉欣（Boussadjra Brahim）

您可以提供一个指向嵌套属性的路径，例如：

     headers: [
          {text: 'name',align: 'start',sortable: false,value: 'customer.name',},
          {text: 'mobile',align: 'start',sortable: false,value: 'customer.mobile',},
          { text: 'item', value: 'item' },
          { text: 'qty', value: 'qty' },
          { text: 'fit name', value: 'fit.name' },
          { text: 'shop', value: 'shop' },
        ],

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

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