Vue.js HTML not refreshing after axios request changes object property

Issue with Vue.js not updating HTML after axios GET request. Here's the structure:

<span @click="tryResponse">
        Data_object: {{ data_object }} <br>
        Data_object.serial: {{ data_object.serial }} <br>
</span>


Data section:


  data(){
    return{
        data_object: {},
    }
  },

Method section:


methods: {
    tryResponse() {
        axios.get('http://127.0.0.1:8000/source/groups/15').then((response) => {
                this.data_object.serial = response.data});

}

The above code is from a file named App.vue.

In Chrome dev tools, I can verify that the data object updates correctly but fails to reflect on the webpage.

Edit: Functioning as expected when using:

this.data_object = response.data

However, facing issues with:

this.data_object.serial = response.data

Answer №1

The variable serial has not been defined within the Vue instance, making it non-reactive.

To make it reactive, you can utilize

Vue.set(this.data_object, "serial", response.data)
to register it with Vue and add observers to monitor changes in this variable.

Alternatively, you can simply declare the serial property within the data object like so:

 data(){
    return{
        data_object: {
            serial: ""
        },
    }
  },

For further information on reactivity in Vue, check out this link.

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

Styling elements with CSS

I've been attempting to align a button to the right of another button. The example above illustrates what I'm trying to achieve. I used Bootstrap to build it, which has a useful navbar feature for layout. However, despite my efforts to use right ...

The AJAX request encountered an error while trying to send a POST request to the http://localhost/upload/undefined endpoint. The

I've been scouring the internet and testing for hours, but I'm still unable to identify the source of the error. I could really use some assistance here. I meticulously followed a tutorial on multiple file uploads with drag & drop functionali ...

Steps to configure caching settings to ensure no caching for the entire site during specific hours, and constant no-cache policy for a particular page

Managing cache for my website has become quite the challenge. Some pages need to be cached during certain hours to improve navigation speed, while others must not be cached during crucial data update times. And to add to the complexity, there are pages tha ...

Insert a record at the start of a data grid - JavaScript - jQuery

What is the most effective way to use jQuery for adding a new row at the top of a table? Here is an example table structure: <table id="mytable" cellpadding="0" cellspacing="0"> <tr> <td>col1</td> ...

Creating a nested structure for dynamic data in Angular

I'm facing an issue while attempting to create a flexible structure dynamically. I possess the following string. "Client->Plant->Route->Turn" I have an array of devices with values for each field in the string along with extra information, ...

Retrieve information using the useEffect hook on a server-side rendered webpage

I am currently working on a project using React JS and Next JS. The page is dynamic, utilizing getStaticPaths and getStaticProps to fetch most data on the server side for rendering. However, there are certain pieces of data that require a token stored in l ...

The Router.use() function is looking for a middleware function, but instead received an undefined value at the

Currently, I am working on implementing authentication with node.js following a tutorial. However, I have encountered some issues that I am struggling to resolve. This is how I have configured the server: // Inserted code for configuring the server The ...

Deactivate the ability to print charts exclusively on HighCharts

I am currently working with a DotNetHighchart that has features like Print Chart, Download as PDF, etc. My goal is to remove only the print chart option. In earlier versions of Highcharts, this was easily achieved by using: .SetExporting(new Exporting { ...

Should I utilize Next.js API route or communicate directly with Firestore from the client side?

Greetings, I am new to Next.js and have a few queries regarding utilizing Firebase authentication on both the client side and server side. My project is set up with Firebase admin and client SDKs, and I have a signup page where users provide their name, em ...

Animate sliding bar to move from the left using jQuery

I am currently experiencing an issue with a sliding animation on mouseover in the navigation. The animation works fine, but the problem arises when I hover over any menu item - the sliding bar starts from the very left instead of starting where the navigat ...

Reacting to a click event to display a new image

I'm looking to create a webpage with multiple images where clicking on one image will open another image with its description. The images are stored locally in my library. I tried using the href attribute in the html tag, but it doesn't accept lo ...

What is preventing the visibility of my invoice items when I try to make edits to my invoice?

Currently, I am utilizing Laravel 5.7 and VueJs 2.5.* in my project. The issue I am facing is related to a Bootstrap Model that I use for creating and editing TicketInvoice and its associated TicketInvocieItems. When I try to edit, the Bootstrap Model open ...

The npm copy script is not functioning properly on the Windows 8.1 operating system

I am working on a sapui5 project and I need to execute the following npm script from my package.json: "scripts": { "flatten": "copy -r \\dist\\resources\\test\\commonjslib\\* dis ...

Verification of user input field

For this mini deposit app, I needed to implement validation for the input field to check for three different conditions: no blank entries, only numerical values, and no negative numbers. Despite having the functionality, my attempts at implementing validat ...

Issue encountered while configuring 'innerHTML' in xmlHttp.onreadystatechange function

Trying to create a JavaScript function that changes the innerHTML of a paragraph within an xmlHttp.onreadystatechange function, I encountered an error in the Chrome Console: Uncaught TypeError: Cannot set property 'innerHTML' of null at XMLH ...

How can I create a placeholder in semantic-ui components?

I'm currently utilizing the plugin and facing an issue with displaying the placeholder. Although data retrieval from the database is functioning properly, the placeholder is not being shown. Note:- When I remove the PHP code, the placeholder display ...

How can I ensure the carousel stays centered on a webpage even after resizing the browser window?

Currently in the process of developing a website, I have implemented a jquery-based carousel on the homepage sourced from here. However, substantial modifications were made to tailor its appearance specifically for the site. The issue at hand is that I hav ...

Verifying the presence of an image via its URL may not be functional across all browsers

Hey folks, I'm working on a project that involves displaying an image along with other fields in a loop where the image source changes with each iteration. I also need to check if the image exists and set a default source if it doesn't. The code ...

Attempting to utilize JavaScript in order to reset a text input field

I'm having trouble clearing a text field using this function. The alert is working but the field remains unchanged. What could be the issue? This function is designed to work on any text field. <!DOCTYPE html> <html> <head> ...

Transforming the *.vue file into a *.js file for deployment on a content delivery network

Is there a way to compile Component.vue files into JavaScript files for use with the Vue CDN in HTML? For example, consider the following component Component.vue: <template> <div class="demo">{{ msg }}</div> </template& ...