data(){
    return {
        tables:[]
    }
},
mounted(){
    this.getData()
},
methods:{
    getData(){
        var subscription = web3.eth.subscribe('logs', {
            address: '0x123456..',
            topics: ['0x12345...']
        }, function(error, result){
            if (!error)
                console.log(result);
        })
        .on("data", function(log){
            // this.tables return the error message typeError: Invalid attempt to spread non-iterable instance.In order to be iterable, non-array objects must have a [Symbol.iterator]() method
            this.tables = [...log]
        })
    }
}

In vue JS i can't access populate the this.tables for data what is the other way to do that?

CodePudding user response：

'this.tables' here mean the tables of the callback function, 'this' in callback don't target to vue data.

try this.getData(this.tables) in mounted().

and getData(tables) in methods,

then the callback should be function(log, tables){ tables = [...log]}

CodePudding user response：

Okay i figured it out now so the solutions is

const self = this
var subscription = web3.eth.subscribe('logs', {
            address: '0x123456..',
            topics: ['0x12345...']
        }, function(error, result){
            if (!error)
                console.log(result);
        })
        .on("data", function(log){

            self.tables.push(log)
        })