I need to show the names of the tags in one row not all array.
In beginning, I get the data from API and I put it in items array, so the problem is I have an array named Tags inside the data coming from API and I want to show only the names that contain that array.
<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>
And this is the script
<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>
