I have a parent component that calls a child component, see the child component below, and the parent component passes it an array of authors
Array incoming with parent component
[
{
"name":"James T. Kirk",
"series":[
{
"title":"myserie1",
"kind":"comedy"
}
]
},
{
"name":"Spock",
"series":[
{
"title":"Star Trek"
"kind":"action"
},
{
"title":"The Next Generation"
"kind":"comedy"
}
]
},
{
"name":"Jean-Luc Picard",
"series":[
]
},
{
"name":"Worf",
"series":[
]
}
]
child component
<template>
<div v-for="(auth,i) in allAuthors" :key="auth.id" class="d-sm-flex mt-8 align-start">
// here i call my allAuthors method
<div>
<div class="">
<p>{{auth.name }}</p>
<p>{{auth.series[i].title}}</p>
</div>
<div class="py-4">{{auth.series[i].kind}}</div>
</div>
</div>
</template>
<script>
export default {
name: "MyListItem",
props: {
users: []
},
data () {
return {
author:[]
}
},
created: function() {
this.author = this.allAuthors
console.log(this.author);
},
computed:{
},
methods: {
allAuthors() {
let newArr = this.users.find(x => x.series.length === 0)
return newArr
}
}
}
</script>
I want to iterate on the child component on the table coming from the parent component by filtering the table of the parent component in a method and call this method in the v-for.
I want to filter the arrays to have only an array whose series exist (different from empty) i.e. whose series property contains at least one element. Then use this array in the v-for.
problem it doesn't work.
How can I do it please
You can create computed property:
Vue.component('MyListItem', {
template: `
<div>
<div v-for="(auth, idx) in allAuthors" :key="idx" class="d-sm-flex mt-8 align-start">
<div class="">
<p>{{auth.name }}</p>
<ul>
<li v-for="(serie, i) in auth.series" :key="i">
<p>{{ serie.title }}</p>
<div class="py-4">{{ serie.kind }}</div>
</li>
</ul>
</div>
</div>
</div>`,
props: {
users: {type: Array}
},
computed: {
allAuthors() {
return this.users.filter(x => x.series?.length > 0)
}
}
})
new Vue({
el: '#demo',
data() {
return {
items: [
{"name":"James T. Kirk", "series":[{"title":"myserie1", "kind":"comedy"}]},
{"name":"Spock", "series":[{"title":"Star Trek", "kind":"action"}, {"title":"The Next Generation", "kind":"comedy"}]},
{"name":"Jean-Luc Picard"},
{"name":"Worf", "series":[]}
]
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<my-list-item :users="items" />
</div>