vue.js - 在数据表中显示嵌套数组

Question

我需要在一行而不是所有数组中显示标签的名称。一开始，我从 API 获取数据并将其放在 items 数组中，所以问题是我在来自 API 的数据中有一个名为 Tags 的数组，我想要仅显示包含该数组的名称。

<template>
<div>
    <v-toolbar flat color="white">
        <v-toolbar-title>My CRUD</v-toolbar-title>
        <v-divider
                class="mx-2"
                inset
                vertical
        ></v-divider>
        <v-spacer></v-spacer>
        <v-text-field
                v-model="search"
                append-icon="search"
                label="Search"
                single-line
                hide-details
        ></v-text-field>
        <v-dialog v-model="dialog" max-width="500px">
            <template v-slot:activator="{ on }">
                <v-btn color="primary" dark class="mb-2" v-on="on">New Item</v-btn>
            </template>
            <v-card>
                <v-card-title>
                    <span class="headline">{{ formTitle }}</span>
                </v-card-title>

                <v-card-text>
                    <v-container grid-list-md>
                        <v-layout wrap>
                            <v-flex xs12 sm6 md4>
                                <v-text-field v-model="editedItem.title" label="Question"></v-text-field>
                            </v-flex>
                            <v-flex xs12 sm6 md4>
                                <v-autocomplete
                                        :items="categories"
                                        item-text="name"
                                        item-value="id"
                                        v-model="editedItem.category.name"
                                        label="Category"
                                >
                                ></v-autocomplete>
                            </v-flex>
                            <v-textarea
                                    label="Body"
                                    v-model="editedItem.body"
                            ></v-textarea>
                        </v-layout>
                    </v-container>
                </v-card-text>

                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue darken-1" flat @click="close">Cancel</v-btn>
                    <v-btn color="blue darken-1" flat @click="save">Save</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-toolbar>
    <v-data-table
            :headers="headers"
            :items="items"
            :search="search"
            class="elevation-1"
    >
        <template v-slot:items="props">
            <td>{{ props.item.title }}</td>
            <td class="text-xs-right">{{ props.item.user }}</td>
            <td class="text-xs-right">{{ props.item.category.name }}</td>
            <td class="text-xs-right">{{ props.item.body.substring(0,150)+".."}}</td>
            <td class="text-xs-right">{{ props.item.tags}}</td>
            <td class="justify-center layout px-0">
                <v-icon
                        small
                        class="mr-2"
                        @click="editItem(props.item)"
                >
                    edit
                </v-icon>
                <v-icon
                        small
                        @click="deleteItem(props.item)"
                >
                    delete
                </v-icon>
            </td>
        </template>
        <template v-slot:no-results>
            <v-alert :value="true" color="error" icon="warning">
                Your search for "{{ search }}" found no results.
            </v-alert>
        </template>
        <template v-slot:no-data>
            <v-btn color="primary" @click="initialize">Reset</v-btn>
        </template>
    </v-data-table>
</div>

这是脚本

<script>
    export default {
        data: () => ({
            dialog: false,
            search: '',
            headers: [
                {
                    text: 'Question',
                    align: 'left',
                    value: 'title',
                    sortable: false
                },
                { text: 'User', value: 'user' },
                { text: 'Category', value: 'category.name' },
                { text: 'Body', value:'body'},
                { text: 'Tags', value:'tags'},
                { text: 'Actions', value: 'name', sortable: false }
            ],
            categories:[],
            items: [],
            editedIndex: -1,
            editedItem: {
                title: '',
                category: '',
                body:''
            },
            defaultItem: {
                title: '',
                user: 0,
                category: '',
                body:''
            }
        }),

        computed: {
            formTitle () {
                return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
            }
        },

        watch: {
            dialog (val) {
                val || this.close()
            }
        },

        created () {
            this.initialize()
            this.getCategories()
        },

        methods: {
            initialize () {
                axios.get('/api/question')
                    .then(res => this.items = res.data.data)
            },

            editItem (item) {
                this.editedIndex = this.items.indexOf(item)
                this.editedItem = Object.assign({}, item)
                this.dialog = true
            },

            deleteItem (item) {
                const index = this.items.indexOf(item)
                confirm('Are you sure you want to delete this item?') && this.items.splice(index, 1)
            },

            close () {
                this.dialog = false
                setTimeout(() => {
                    this.editedItem = Object.assign({}, this.defaultItem)
                    this.editedIndex = -1
                }, 300)
            },

            save () {
                if (this.editedIndex > -1) {
                    Object.assign(this.items[this.editedIndex], this.editedItem)
                } else {
                    this.items.push(this.editedItem)
                }
                this.close()
            },
            getCategories(){
                axios.get('/api/category')
                    .then(res => this.categories = res.data.data)
            }
        }
    }
</script>

Answer 1

您可以简单地创建一个方法来过滤数组中每个项目的属性，并创建一个仅包含名称的新数组。

methods: {
  getTagNames: (tags) => {
    return tags.map(tag => tag.name)
  }
}

<td class="text-xs-right">{{ getTagNames(props.item.tags) }}</td>

另一种选择是将此函数用作过滤器，

filter: {
  getTagNames: (tags) => {
    return tags.map(tag => tag.name)
  }
}

<td class="text-xs-right">{{ props.item.tags | getTagNames }}</td>