Styjun

I am currently experiencing an issue where the computed() property is not able to get data. Although data was already initiated in created() property. Am I doing it wrong? Please advise how I can fix this issue.

const randomPlayers = 
 template:
 `
 <input type="text" v-model="search_player">
 <div v-for="player in modPlayers" v-if="list_of_random_players!=null">
 <p>player.firstname</p>
 <p>player.lastname</p>
 <div>

 `,
 props: ['data'],
 data ()
 return
 list_of_random_players: null,
 search_player: null
 
 ,
 created()
 this.get_random_players()
 ,
 computed: 
 modPlayers()
 return this.list_of_random_players.filter( person => 
 return !this.search_player )
 
 ,
 methods: 
 get_random_players: function()
 $.post(
 url:'random_url'
 data: 
 players: data
 
 ).done((success)=>
 this.list_of_random_players: JSON.parse(success)
 )fail((err)=>
 console.log(err)
 )
 
 

I get the following two errors:

(1) TypeError: Cannot read property 'filter' of null

(2) TypeError: this.list_of_random_players.filter is not a function

From Vue: "When a Vue instance is created, it adds all the properties found in its data object to Vue’s reactivity system. When the values of those properties change, the view will “react”, updating to match the new values."

So data is a function that returns an object but as mentioned by @Sovalina you are not returning it so you cannot access its properties. You need to add return and change null to []:

data() 
 return 

 list_of_random_players: [],
 search_player: []
 
 ,

or you can do without return and like a regular object:

data: 
 list_of_random_players: [],
 search_player: []
 

When your Vue component is used multiple times, it is better to use it like a function(first case).

"When defining a component, data must be declared as a function that returns the initial data object. Why? Because there will be many instances created using the same definition. If we still use a plain object for data, that same object will be shared by reference across all instance created! By providing a data function, every time a new instance is created we can call it to return a fresh copy of the initial data."
Reference:link

It might be just a typo but you need to add : to methods as well.