Using Vue.js - error occurs when trying to push an object using the push method

I encountered an issue while trying to use the push() method to add data to an object:

Uncaught (in promise) TypeError: this.message.push is not a function

The scenario involves receiving data from an API call and needing to append it to an object.

var price = new Vue({
        delimiters: ["[[","]]"],
        el: '#app',
        data: {
            message: {}
    },
    mounted () {
    {% for i in arr %}
        axios
        .get('https:apicall/symbol={{ x }}')
        .then(response => (this.message.push({name : response.data.price , cost: response.data.price.regularMarketPrice.fmt}))
    {% endfor %}
  }
})

After making the following changes:

message: []

and

.then(response => (this.message.push(response.data.price))

The problem was resolved successfully. This project involves using Vue within the Django framework, and as a beginner to Vue.js, I am learning along the way.

Answer №1

push is typically used as an array method instead of an object method. In an array, you can initialize it as message:[], while in an object, you can initialize it as message:{}. This allows you to add data to an array using the push method, or assign data to an object or a property within that object, for example:

this.message=response.data.price

or

this.message.price=response.data.price

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 there a source where I can locate type definitions for Promise objects?

In the process of creating a straightforward class called Primrose, I am extending the global Promise object in order to include additional methods like resolve and reject. export class Primrose<Resolution> extends Promise<Resolution>{ priv ...

Using Vue.js to dynamically update data in the data() property

I need to determine if there is an authenticated user in order to display the sidebar and header. If there is no authenticated user, the sidebar and header should not be rendered, only showing the Login or Register options. However, I am facing an issue wh ...

Returning Props in Dynamic Components with Vue 3

Exploring the capabilities of Vue3's Dynamic Component <component>, I am currently working with this setup: Component 1: <template> <div> <h1> Name Input: </h2> <Input :model="props.name" /> ...

What is the process for subscribing to the ActivatedRoute change event and extracting the URL along with its parameters?

My goal is to clear the input text by pressing buttons that send routing events. If a specific route is received without any parameters (indicated by green buttons on the screen below), then the text box should be cleared. If the route is incorrect, or cor ...

How can Nuxt effectively manage Login and Logout buttons to prevent content flashing?

As a newcomer to Nuxt, I've successfully implemented a bootstrap header with the standard v-if="authenticated" logic for displaying login/logout buttons. The authentication provider I'm using is Firebase, which includes an onAuthStateChanged met ...

Is there a way for me to determine the value that has been assigned to a <li> key attribute in React using Jest and testing-library/react?

In my current project, I am using a combination of React with TypeScript and Jest along with Testing Library for testing purposes. I have a specific requirement to unit test some code where I need to ensure that the person.id is correctly set as the key at ...

The `role` property is not recognized in the type `User | AdapterUser` within NextAuth

In my attempt to develop a NextJS application integrated with NextAuth, I am facing an error in my [...nextauth].ts file while setting up the callbacks: Type error: Property 'role' does not exist on type 'User | AdapterUser'. Property ...

Encountering an issue post-upgrade with Angular 7 project

Currently, I am facing an issue with upgrading a project from Angular 6 to version 7. Despite following multiple online tutorials and successfully completing the upgrade process, I encountered an error when running the 'ng serve' command: ERROR ...

Testing React Components - The `useClient` function should only be used within the `WagmiConfig` component

In my Next.js app with TypeScript, Jest, and React testing library, I encountered an error while trying to test a component. The error message states that `useClient` must be used within `WagmiConfig`. This issue arises because the `useAccount` hook relies ...

Vue lifecycle hook - selectively halt component creation

Is it possible to stop the creation of a component during its lifecycle hook? For instance: beforeCreated() { // check value from vuex store if (this.$store.state.attendeesCount >= this.$store.state.maxAttendees) { // prevent further pr ...

Is it possible to alter the source of a component in Vue.js routes based on different environments using an 'if'

Within a vue project, there are certain environment variables that need to be taken into consideration. The goal is to dynamically call components based on these variables. How can an if statement be used in the router file to achieve this component swit ...

Encountering ReferenceError when attempting to declare a variable in TypeScript from an external file because it is not defined

Below is the typescript file in question: module someModule { declare var servicePort: string; export class someClass{ constructor(){ servicePort = servicePort || ""; //ERROR= 'ReferenceError: servicePort is not defined' } I also attempted t ...

Refreshing local JSON data in Vue.js

Being fairly new to Vue.js, I encountered an issue where I am unable to update or write data in my local JSON file. Let's assume that I have a data.json file https://i.sstatic.net/GZKh5.png and I want to add a new entry to it. I am currently using ...

Invoke a general function with corresponding generic parameters

I am currently working on a function that takes another function and its arguments as parameters, then runs the function with the provided arguments and returns the result while maintaining the data types. If the function being provided has a fixed return ...

Ensuring the safety of generic types in Typescript

Typescript is known for its structured typing, which is a result of the dynamic nature of Javascript. This means that features like generics are not the same as in other languages with nominal type systems. So, how can we enforce type safety with generics, ...

Injectable error occurred while injecting one @Injectable() into another

I'm encountering an issue with Angular2 Dependency Injection. When attempting to inject one class into another, I am receiving the following error: Error Message: "Cannot resolve all parameters for 'ProductService'(undefined). Make sure tha ...

Receiving the latest state from Vuex in a Vue3 component

Is there a way to update the user state in Vuex and have it reflect instantly on the frontend without requiring a page reload? I've searched for solutions but haven't found any that work for me. I'm currently exporting the store as a functi ...

Logged in user currently viewing a Vue.js application on IIS

My current setup involves a Vue.js application hosted on an IIS server that communicates with a .Net Core web service also on the same server. The client site has Windows Authentication enabled, and I'm looking for the most efficient method to retriev ...

Vue.js Contact Form Issue: Error message - 'Trying to access 'post' property of an undefined object'

Currently, I am encountering the error 'cannot read property 'post' of undefined' in my code, but pinpointing the exact mistake is proving to be a challenge. Given that I am relatively new to Vue JS, I would greatly appreciate it if som ...

Tips for configuring VS Code to automatically change a callable property to an arrow function instead of a standard function

When interacting with ts/tsx files in VS Code, the autocompletion feature for callable properties offers two options: propertyName and propertyName(args): https://i.sstatic.net/BFVTm.png However, selecting the second option generates a standard function: ...