Tips for showcasing axios data on Vue components

I'm just starting out with Vue.js and I'm struggling to grasp how it all works. I have a function that sends data to the server and receives a response using axios. However, when I try to display the response using a variable, something seems to be going wrong.

Here's a snippet of my HTML template:

<p v-if="text"> {{ text }} </p>

And here's my Vue code:

const text = ref(undefined);

axios.post('api', anotherVar).then( 
    function (response) {
        response.data.error ? (text.value = response.data.error, console.log(text.value)) : (console.log('Everything is OK'));
});

Answer №1

This is how the process will function.

let message = ref(undefined);
    axios.post('api', anotherVar).then( 
     function (response) {
      message.value = response.data.error ? response.data.error  : 'All systems are functioning properly'; 

     if(message.value != undefined ) console.log(message.value)

    });

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

Having trouble with submitting an Ajax form to a MySQL database

My expertise lies in PHP and HTML, but I'm currently learning JavaScript. I'm facing a challenge with creating a form that can submit data to be inserted into MySQL without reloading the page (using AJAX). Here is the form I have: <form id=" ...

Confirm the data in each field of a form individually

I am facing an issue with a form that contains 7 fields. When I submit the form to the "register.php" page, it processes each field one by one and outputs the result as a whole. However, I need to validate the data using ajax, collect the output one by one ...

The CSS file is failing to recognize the changes made to the data-theme attribute in the HTML

Currently implementing a dark theme on my website involves adding a toggle switch to the footer.html page, which adds a variable named data-theme = 'dark' to the html. The scss files of the footer and core are adjusting accordingly based on the c ...

When there is content behind the list, the Autosuggest Ajax does not function properly

I have successfully implemented an ajax/jquery dropdown/list feature that retrieves results from the database based on user input. For each result in the database, it generates a <li> element and converts it into a clickable link to redirect users t ...

The Google Visualization chart fails to display properly once CSS is applied

Struggling with a graph display issue here. It's quite perplexing as it works fine on older laptops and Safari, but not on Chrome or older versions of Firefox. Works like a charm on my old laptop and Safari, but fails on Chrome and Firefox (haven&apo ...

What is the process for creating a new element and utilizing its reference to add child elements in React?

I've been struggling to create an HTML element in a parent component in React, and then access that component's div from a child component in order to add new elements to it. Despite multiple attempts, I can't seem to resolve the issue of p ...

Changing a d3 event from JavaScript to Typescript in an Angular2 environment

I am a beginner in Typescript and Angular 2. My goal is to create an Angular2 component that incorporates a d3js tool click here. However, I am facing challenges when it comes to converting it to Typescript. For instance, I am unsure if this code rewrite ...

Encountering an "Undefined index" error when attempting to send a file and path using FormData through

I have a question about my code. I am trying to send a file and a path to the server. The path needs to be constructed using these variables so that I can use it to output the file later on. var FD = new FormData(); var MyString = "uploads/docs/KEP" + m ...

Ensuring that only one field is selected with mandatory values using Joi validation

Is there a way to create a validation rule utilizing Joi that ensures if valueA is empty, then valueB must have a value, and vice versa? My current approach involves using Joi for validating an array of objects with properties valueA and valueB. Below is ...

The this.setState method does not seem to be properly updating the nested array within the user object. However, when checking the same logic using console.log, the object

When the user selects multiple meals, they are stored in an array of objects inside the user object. Upon clicking submit, the code utilizes setState to update the user's meals as follows: submitAllMeals(arrayOfMeals) { this.setState({ u ...

Ways to retrieve several parameters from a controller using Ajax Jquery in Codeigniter

I need to retrieve a list of images from a folder based on a specific ID. Currently, I am able to get the file names but I also require the upload path. Is there a way to obtain both sets of data using a single function? Javascript Code: listFilesOnServ ...

Generating unique spreadsheet identifiers in an HTML file

When it comes to displaying a chart using Google Sheets, I encounter an issue where the data is sourced from the same spreadsheet: function updateChart() { var ui = HtmlService.createHtmlOutputFromFile('ChartLine').setWidth(1350).setHeight(550) ...

Issue with Material-UI DataGrid Component: Unable to access property 'length' as it is undefined

I need to display my JavaScript Object Data in a table format with pagination and sorting capabilities. I have chosen the DataGrid component from Material UI, but I am encountering some errors. Below is the code snippet: import React from 'react&apos ...

Utilizing Vue.js to dynamically update an Amcharts4 chart

Currently, I am utilizing AmCharts4 in conjunction with Vue.JS. Initially, I have set up the default chart design to display when the page loads. However, upon attempting to add dynamic values post-page load (via a button click), the changes do not appear ...

Tips for resizing a Textbox by dragging in asp.net?

Is there a way to dynamically adjust the size of a Textbox by dragging it in an ASP.NET application during run-time? ...

Using AngularJs, you can access the document.body.onfocus event within the controller of

I am attempting to detect when the user closes or cancels the File Upload Window <input type="file"> Since there isn't a built-in listener for the close event of the file upload, I am trying to capture it using the document.body.focus event, s ...

What causes my React app menu to unexpectedly open while simply updating the state without any CSS modifications?

In the Header component, there is a button that triggers the toggleNav function in context.js when clicked. This function changes the state of isNavOpen from false to true, resulting in the opening of the navigation. Surprisingly, there doesn't appear ...

Troublesome glitches in jQuery?

I'm having an issue with the following code: var buggy_brand_name = ['Baby Jogger', 'Babyzen', 'Bugaboo', 'GB', 'Icandy', 'Joie', 'Maclaren', 'Mamas&Papas', 'Ma ...

Improving Performance of a Large Unordered List using JavaScript

My website currently features a search box that retrieves images and displays them in a list format. Each image has an associated click event that triggers an overlay on the parent li element when clicked. However, with search results exceeding 300 images ...

What is the best approach for managing client-side routes when a page refresh displays the backend Rails route instead?

After deploying my SPA to Render, I encountered an issue. My application comprises a React frontend with Redux and a Rails backend. When the app initializes, it correctly displays the frontend route in the browser. Subsequent navigation without refreshing ...