setting data with Vue.js

Question

Sorry for my begginner question, but I'm stucked since yesterday on a basic problem which i cannot figure out the solution.

I want to fill my variable logs with some json object and render it in an array.

Here is my html :

<tbody>

  <tr v-for="log in logs">
    <td>{{log.incident}}</td>
    <td>{{log.request}}</td>
    <td>{{log.requested}}</td>
    <td>{{log.message}}</td>               
  </tr>            

</tbody>

and here is my JS

let vm = new Vue({
    el: '#container',
    components: {
        'table-header': tableHeader,
    },
    data: {
        logs: []
    },
    methods: {
        getLogs() {
            addon.port.on('log', function (data) {
               console.log(data);
               this.$add('logs',data)
            });
        }
    },
    ready:{
        function(){this.getLogs()}
    }

});

vm.getLogs();

The ready does not seems to work. Why?
The this.logs is undefined? Why?
It complains that the "this.$add is not a function"
In the html the logs are never populated in the loop. why?

Check what vue version you have. In v2 they replaced 'ready' with 'mounted' — Piotr Pasieka
– Piotr Pasieka, Commented Nov 3, 2016 at 11:21
here is the code inside jsfiddle.net/#&togetherjs=gIQLorBo7t — thiebaut fischer
– thiebaut fischer, Commented Nov 3, 2016 at 13:08

Jeff · Accepted Answer · 2016-11-03 15:40:18Z

1

Your ready should not be an object, it should be a function

2&3&4. Inside an anonymous function, this refers to something else. Use an arrow function to keep the scope of this, or store a reference to this

let vm = new Vue({
     el: '#container',
     components: {
         'table-header': tableHeader,
     },
     data: {
         logs: []
     },
     methods: {
         getLogs() {
             addon.port.on('log', (data) => {
                console.log(data);
                this.$add('logs',data)
             });
         }
     },
     ready() {
         this.getLogs()
     }

     });

//OR do this
getLogs() {
  var that = this;
             addon.port.on('log', function(data) {
                console.log(data);
                that.$add('logs',data)
             });
         }

answered Nov 3, 2016 at 15:40

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

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

Comments

Saurabh · Accepted Answer · 2016-11-03 12:10:51Z

0

You can also use mounted, something like:

mounted () {
    this.getLogs()    
}

Documentation.

data must be a function for a Vue component, but for a Vue instance it should be fine..

So for a Vue component, it should have data like following:

data: function () {
  return {
    logs : []
  }
}

edited Nov 3, 2016 at 12:10

answered Nov 3, 2016 at 11:22

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

2 Comments

Belmin Bedak Over a year ago

data should not be function if it's not part of component .If it's part of components It should be function that return object.

Saurabh Over a year ago

@thiebautfischer yes.

Stephan-v · Accepted Answer · 2016-11-03 11:14:36Z

0

I don't know if your example is valid and I can't test it at the moment but I am used to the syntax like so:

ready: function(){
    console.log('ready);
}

Same goes for your methods. Maybe check the documentation and apply the syntax like given there to begin with.

https://vuejs.org/guide/index.html#Getting-Started

answered Nov 3, 2016 at 11:14

Stephan-v

20.5k32 gold badges125 silver badges213 bronze badges

3 Comments

thiebaut fischer Over a year ago

yes I tried this way but it does not work, it does not print ready

thiebaut fischer Over a year ago

I did not find proper documentation about ready, but as far as I understood it is running the functions inside ready once the object is created?

Stephan-v Over a year ago

It would help a lot if you could make a small example in JSfiddle.

Collectives™ on Stack Overflow

setting data with Vue.js

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related