Could anyone make me understand what does the code mean in vue.js

Question

Could anyone make me understand the below scenario because I tried searching the web and unable to find any info.

I have the below code which does not work because infox is null. But when i change it "infox: []" then it works fine. I need to understand why is it so ?

data:{
    infox:null
}


 methods: {
      loadmore: function () {
        axios.get(this.url)
this.infox.push(...response.data);
}}

Next I want to understand what does the three dot stands for in ...response.data and why I cannot code in the below manner without three dots which makes more sense. I would really appreciate if you could point me to the source.

methods: {
      loadmore: function () {
        axios.get(this.url)
this.infox.push(response.data);
}}

Below is my JSON data

[
  {
    "Categories": "Fashion", 
    "Clicked": 30, 
    "EndDate": "2019-08-21", 
    "HomepageSpotlight": "No", 
    "ImageMainPage": "/static/images/fashion16.jpg", 
    "MainPage": "Yes", 
    "Mainhomepage": "No", 
    "Rating": 5, 
    "SlugTitle": "buy-clothes-with-50-Off", 

  }, 
  {
    "Categories": "Fashion", 
    "Clicked": 145, 
    "EndDate": "2019-08-21", 
    "HomepageSpotlight": "No", 
    "ImageMainPage": "/static/images/fashion10.jpg", 
    "MainPage": "Yes", 
    "Mainhomepage": "No", 
    "SlugTitle": "get-upto-60-off-on-jeans", 
  }
]

Andriy Kuba · Accepted Answer · 2019-08-15 08:20:42Z

1

The this.infox variable refers to the infox:null in your example, so it does not work because null, obviously, does not have the method push.

When you change the infox to an Array like infox: [] then it works because an Array does have the method push.

Three dots operator is a new feature in ES6, you can read about it in a lot of articles, for example here: https://dev.to/sagar/three-dots---in-javascript-26ci

In your case the this.infox.push(...response.data) will populate each element of the data into the infox array. Your data is the array it'self, so it will copy the data array to the infox array.

The this.infox.push(response.data) string will result in putting all the data array in just one element of the infox array.

edited Aug 15, 2019 at 8:20

answered Aug 15, 2019 at 8:13

Andriy Kuba

8,2732 gold badges31 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Could anyone make me understand what does the code mean in vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related