Vue 3 Ajax

Posted on  by admin

Modified2 years, 8 months ago. I'm trying to populate a Vue with data from the JsonResult of an AJAX query. My Vue receives the data just fine when I encode it from my View Model, but not when I try to retrieve it using AJAX.

Prerequisites

Here's what my code looks like:. This is with all of the proper includes. I know that @Url.Action("GetItems", "Settings") returns the correct URL and the data comes back as expected (as tested by an alert in the success function (see comment in success function in AJAX).

Populating it like so: var allItems = @Html.Raw(Json.Encode(Model)); works, but the AJAX query does not. Am I doing something wrong? 2828 gold badges102102 silver badges151151 bronze badges. 151151 bronze badges.

Step 3 — Creating a Vue 3 Component

You can make the ajax call inside of the mounted function (“ready” in Vuejs 1.x). 4444 bronze badges. 3,26222 gold badges2323 silver badges3636 bronze badges. 2323 silver badges3636 bronze badges.

I was able to solve my problem by performing my necessary action within the success handler on the AJAX call. You can either put the entire Vue object creation in there, or just set the data you need. 2828 gold badges102102 silver badges151151 bronze badges.

GET method

151151 bronze badges. I had same problem, fixed by Samuel De Backer's answer above. The problem is at ajax success callback function, .

if you use this.data, it is incorrect, because when 'this' reference the vue-app, you could use this.data, but here (ajax success callback function), this does not reference to vue-app, instead 'this' reference to whatever who called this function(ajax call).

So you have to set var self = this before ajax, then pass into callback function (success call back). Here is my working code.

11 gold badge3030 silver badges3030 bronze badges. 3030 bronze badges. Throughout this tutorial, you will learn to use the JavaScript' Fetch API in your Vue 3 app to fetch data and consume a REST API.

We'll see by example how to send HTTP requests to a REST server to fetch data in your Vue 3 application. Vue 3 is not yet released for production but it's expected to be released soon.

We'll learn how to generate a new Vue 3 application using the latest version of Vue CLI v4. More often than not, you'll need to fetch data or consume a REST API in your front-end application. We have built-in and external libraries for sending HTTP requests to servers such as the Fetch API and the Axios http client.

GET example

In this tutorial, we’ll be learning how to use the fetch api in our Vue 3 application step by step. In order to follow this tutorial, you are going to need:. The knowledge of HTML, CSS, JavaScript, and Vue. Node.js installed on your machine,.

Let's start by installing Vue CLI 4 in our local development machine.

Open a command line interface and run the following command:. After installing the CLI. If you run the vue --version command, you should get the following output:. Now if you have Vue CLI 4 installed, you can create a Vue 3 project using the following command:.

You'll be prompted with the following code:. Next, you need to select the second option Default (Vue 3 Preview) ([Vue 3] babel, eslint) to tell the CLI to generate a new Vue 3 based project.

Next, press Return. Your project's files will be generated and the dependencies will be automatically installed from npm. After installation, go to the project's folder and start the development server as follows: . The development server will be running on localhost:8080:.

Next, let's create a Vue 3 component and use it in our application. In the src/components/ folder, add a new Posts.vue file with the following code:. We first import ref from vue3, next we define the setup function.

In the setup function of the component, we define two reactive variables data, loading and error and a fetchData function for fetching data from the server.

We call the fetchData method in the onMounted hook to invoke it when the component is mounted in the DOM. We return the data, loading and error variables from the setup method so they become available in the component's template.

If setup returns an object, the properties on the object can be accessed in the component's template.

Next, let's implement the fetchData function as follows:. Next, we need to add the template code inside the tag:. We use iterate over the data array and display the title and body of each post.

Pass parameter description

Next, we need to import our Posts component from the Posts.vue file in our App.vue file as follows:. We simply import the component from the ./components/Posts.vue file and we declare it inside the components object and then we include it in the template via its tag name .

We learned about fetching data from a REST API server using Vue 3 and the Fetch API.

Using Axios with Vue.js

Vue3 Pack Project . Vue This version is recommended axios To complete ajax request . Axios Is based on Promise of HTTP library , Can be used in browsers and node.js in . Github Open source address : https://github.com/axios/axios.

usage method :. We can simply read JSON data :. constapp = {data(){return{info: 'Ajax test !!'

}}, mounted(){axios .get('https://primo.wiki/try/ajax/json_demo.json') .then(response => (this.info = response)) .catch(function(error){// Request failed processing console.log(error); }); }}Vue.createApp(app).mount('#app').

use response.data read JSON data :.

Site list

{{ site.name }}