Attempting to spread a non-iterable instance is invalid. For non-array objects to be iterable, they must have a [Symbol.iterator]() method

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

What is an alternative method in Vue JS to successfully store data in this.tables?

javascriptvue.jsweb3js

Answer №1

After some troubleshooting, I was able to find the solution:

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

            instance.record.push(log)
        })

Answer №2

The term 'this.tables' refers to the tables within the callback function, where 'this' does not point to the Vue data.

Attempt using this.getData(this.tables) in the mounted() method.

Additionally, use getData(tables) in the methods section,

resulting in the callback appearing as 

function(log, tables){ tables = [...log]}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to employ a method to eliminate a specific valuable element 'this' from an array?

I am working on a task management app that allows users to create a To-Do list and remove specific items from the list. Currently, I am facing an issue with using 'localStorage' to save the list when the page is refreshed. The problem arises when ...

javascriptjqueryhtml

Error encountered during automatic form submission

My current project involves creating a web notepad that automatically saves changes every minute. The notes are stored in a field called "notas" for each user in the database. Here is some of the code I am using: <html> <head> < ...

javascriptphpmysqlforms

Can Vue.js be paired with pure Node.js as a backend without relying on Express?

After successfully building a project with both vue js and node js, specifically with express, I'm curious if it's feasible to solely utilize node js without frameworks like express. ...

javascriptnode.jsvue.js

Unusual occurrence in Chrome when checking definitions: ReferenceError: x is not defined

Recently, I've come across some odd behavior in Chrome following its latest update. Whenever I try to determine if a variable is defined, it ends up triggering an uncaught error like the one shown below: if(x) { alert('x is defined.'); } T ...

javascriptgoogle-chrome

Accepting multiple file inputs in a form without using a selector, but instead utilizing the 'this' keyword or finding an alternative approach

When dealing with single file uploads, you can access the file input using this.image <form id="form"> <input type="file" name="image"> <input type="submit" name="submit"> </form> $ ...

javascriptjquery

I encountered an error while attempting to lint my code because ESLint was not configured to ignore the

Trying to set up eslint in a Next.js project, here is the file structure: .eslintignore .eslintrc.js .next .prettierrc .stylelintrc.js components forms modals modules node_modules In my .eslintignore file, I have added node_modules/*. When running eslint ...

javascriptnode.jsnext.jseslinteslintignore

Why is the responseText of an AJAX request empty on Chrome?

Why does this simple AJAX request work in IE but not Chrome? Check out the code below: var x = new XMLHttpRequest(); x.open("GET","style.php",true); x.send(); alert(x.responseText); The last line triggers an empty 'alert' window. Here's ...

javascriptphpjqueryajaxgoogle-chrome

JS client-side form validation involves communicating with the server to verify user input

I currently have an HTML form that is being validated on the client side. Below is a snippet of the code: <form id='myForm' onsubmit='return myFormValidation()'> ... </form> Now, I want to incorporate server-side valida ...

javascriptjqueryhtml

Explore by the anchor tag

I've recently implemented a search bar utilizing Bootstrap. This is the code for the search bar: <div class="md-form mt-0"> <input class="form-control" id="myInput" type="text" placeholder="Sear ...

javascripthtmljquerybootstrap-4

html inserting line break using label

I am attempting to dynamically set text to a label using jQuery. However, I am having trouble getting the <br> or \n to create new lines. Instead, all the text displays on the same line and wraps around. If you want to see my code in action, ch ...

javascriptjqueryhtml

Leverage Ajax to dynamically refresh content on a webpage by fetching data from a text file using PHP

I am facing an issue with updating data on my webpage using Ajax. The data is fetched through a PHP script and I need the refresh function to run every 5 seconds. However, it seems like this functionality is not working as expected. This is the JavaScript ...

javascriptphpajax

Avoid displaying pop-up repeatedly (using current library)

I am currently customizing a Shopify theme that includes its own popup settings. I have created a new popup for my website that prompts visitors to choose their preferred language upon arrival. Everything seems to be working fine up to this point, but the ...

javascripthtmljqueryshopify

Error in Material UI when using the select component

CustomComponent.js:98 UI Error: The value undefined provided for the selection is out of range. Please make sure to select a value that matches one of the available options or ''. The available options are: `All`, `Software Development`, `Qualit ...

javascriptreactjsmaterial-ui

Exploring the functionality of a dynamic array in Vue.js 3

In my Vue.js 3 (beta) project, I have created an array using the reactive function in order to bind its items to various UI components through a loop. This setup has been successful thus far. However, I now face the challenge of updating a specific value ...

javascriptarraysvue.jsvuejs3

Using JWPlayer 6 and JWPlayer 7 simultaneously in one project - how is it done?

Trying to incorporate both JWPlayer 6 and JWPlayer 7 into my expressJS, AngularJS project has been a challenge. While they each work independently without issue, bringing them together has proven to be tricky. In my index.html file, I include them separat ...

javascripthtmlangularjsexpressjwplayer

The integration of Angular 6 with AngularJS components fails to load properly in a hybrid application

Currently, I am in the process of upgrading a large AngularJS version 1.7.3 to a hybrid app using Angular 6. The initial phase involved converting all controllers/directives into an AngularJS component. Subsequently, I created a new Angular 6 project skele ...

javascriptangularjsangularhybridng-upgrade

There are two notable problems with Bootstrap 4 Tooltip. The first is that it appears when a button is clicked, and the second is that it shows up for disabled elements

I am currently experiencing an issue with my tooltip while using Bootstrap 4. In my index.html, I have the following script loaded: $('body').tooltip({ selector: '[data-toggle="tooltip"]', delay: { show: 550, hide: 0 } }); The proble ...

javascriptjqueryhtmlbootstrap-4tooltip

The function call FirstName.Val() is invalid and will not execute as intended

When attempting to create an array called requestData using the input values from a user details form, I encountered an error stating that .val() is not a function. The code snippet where this problem occurred is as follows: Jquery $('#submit' ...

javascriptjquery

Generate radio buttons in a model loop in Vue.js based on names automatically

I am attempting to generate a model for each radio button using the inputname as the identifier. My approach involves looping through the array of objects to identify instances where more than one inputname is present, and then converting this value into a ...

javascriptarraysvue.jsobjectvuejs2

Ways to pinpoint the correct identifier in a Vue JS modal popup?

I am currently working on integrating a Vue JS frontend with a simple API created using Node.js and Express for a TodoList project, utilizing Axios. The issue I am facing is as follows: I have successfully established all the connections to the frontend. ...

node.jsexpressvue.jsaxios