1๐
Try this snippet. I think your code can be simplified down to this:
const mockData = [
{
name: 'abc',
poster_path: 1
},
{
name: 'def',
poster_path: null
}
]
Vue.component('foo', {
props: ['results'],
template: '<ul><li v-for="c in clean" :key="index">{{c.name}}</li></ul>',
computed: {
clean: function() {
return this.results ?this.results.filter(o => o.poster_path !== null) : [];
}
}
})
var app = new Vue({
el: '#app',
data() {
return { results: mockData }
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
Foo component: <foo :results="results"/>
</div>
๐คAlexMA
- [Vuejs]-Display pictures dynamically with v-for
- [Vuejs]-How to access data in mounted() with nuxt.js
1๐
just assign the functionality of the funcion like this
props: ['results'],
data() {
return {
clean: []
}
},
mounted() {
this.clean = this.results.filter(o => o.poster_path !== null)
}
- [Vuejs]-How to import javascript library in main.js for global availability throughout vue app?
- [Vuejs]-How can I convert this type of date (22-07-2020 12:00) to ISO date
1๐
props: ['results'],
data() {
return {
clean: this.results.filter(o => o.poster_path !== null)
}
},
Please try it.
You can directly import props to the component data.
๐คMidas Dev
Source:stackexchange.com