[FIXED] Why my Vue Js created method not working?

Issue

Here is my code: So is this, but now follows a code block:

el: '#app',
data: {
  content: '',
  posts: [],
},

ready: function() {
  this.created()
},

created() {
  axios
    .get('http://localhost/BUproject/posts')
    .then(response => (this.posts = response.data))
},

Solution

First of all ready lifecycle is already deprecated in Vue 2.x. You should use mounted instead.

Second I think the reason why it is not saving on the posts data is because you got parenthesis on your response instead of curly brackets.

Third: if you use created you don't need to call it on components mounted. It is being called before it is being mounted. If you want to call the axios request on mounted you should do it on methods. please see below..

el: '#app',
data: {
  content: '',
  posts: [],
},

mounted() {
  // if you want to call it on component mounted
  this.getPosts()
},

created() {
  // if you want to call it on component created
  this.getPosts()
},

methods: {
  getPosts() {
    axios.get('http://localhost/BUproject/posts').then(response => {
      this.posts = response.data
    })
  },
},

Please check Vue's lifecycle hooks documentation .

Answered By - KevDev

Answer Checked By - Clifford M. (PHPFixing Volunteer)