[Vuejs]-Vue.js making a data property = to the return value of a method

by

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

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)
}
👤Gabriel Martinez Bustos

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

Leave a comment