CODEWITHSUNDEEP
javascriptvue.jsweb3js
Miles Selim
Miles Selim

Reputation: 55

Invalid attempt to spread non-iterable instance.In order to be iterable, non-array objects must have a [Symbol.iterator]() method

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?

Upvotes: 0

Views: 5843

Answers (2)

Miles Selim
Miles Selim

Reputation: 55

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)
        })

Upvotes: 1

thecyantiz
thecyantiz

Reputation: 16

'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]}

Upvotes: 0

Related Questions