Attempting to utilize Vue js to connect to an API

I'm currently facing difficulties while trying to access an API in order to retrieve data. As a novice in the world of vue.js and javascript, I encountered an error message saying

Uncaught SyntaxError: Invalid shorthand property initializer
. Unfortunately, I am unable to decipher the meaning or implications of this error.

<body>
    <div id="vue-app">
          {{ articles }}
    </div>
<body>

var article = new Vue({
    el: '#vue-app',

    data: {
        articles = ''
    },

    created: function () {
        this.fetchData();
    },        

    methods: {
        fetchData: function () {
            var that = this
            this.$http.get('localhost/aim-beta/rest/export/json/article'),
                function (data) {
                    vm.articles = data.main.temp;
                }
        }
    }

});

Answer №1

Opt for utilizing the axios library over this.$http when making api requests.

Answer №2

In my opinion, it is not possible to use the equals sign in JavaScript object notation

content: {
    posts = ''
}

Answer №3

Give it a shot

data: function() { 
    return () {
        content: ‘’
    }
}

Make sure to add http:// before the localhost

this.$http.get('http://localhost/api/data'),
            function (response) {
                this.content = response.json()
            }

Answer №4

Follow these steps to set up the data JSON object:

data: {
     blogPosts: ''
}

Next, initiate a Promise for initiating the HTTP request (ensure you include the http:// in the URL):

this.$http.get('http://example.com/api/posts')
          .then(function(response){
                this.blogPosts = response.json();
          });

Reference : Official Documentation

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

When trying to convert a function component to a class component, using `npm init react-app` may result in the error `ReferenceError: React is not defined no-undef`

After running npm init react-app appname, I noticed that the file App.js was created, containing a function component: function App() { return ( <SomeJSX /> ); } I decided to change this function component into a class component like this: c ...

Properly maintaining child processes created with child_process.spawn() in node.js

Check out this example code: #!/usr/bin/env node "use strict"; var child_process = require('child_process'); var x = child_process.spawn('sleep', [100],); throw new Error("failure"); This code spawns a child process and immediately ...

Refreshable div element in a Code Igniter-powered web application

I am encountering difficulties with automatically refreshing my div using the CodeIgniter framework. My goal in the code snippet below is to have the particular div with id="lot_info" refresh every 1 second. The div is not refreshing, and an error message ...

Looking for a demonstration using dust.js or handlebars.js in a two-page format with express3.x and node?

Currently, I am in the process of selecting a templating engine to use. While I have come across numerous single-page examples utilizing template engines, I am specifically searching for a practical example that demonstrates handling two distinct pages whi ...

Troubleshooting JavaScript in Internet Explorer 9

Currently, I am encountering an issue while attempting to debug JavaScript .js files in my Solution using Visual Studio 2010 and IE 9. Despite placing breakpoints in the files, I am unable to debug successfully. I have attempted various troubleshooting ste ...

How to send a PHP variable to Ajax and execute a corresponding PHP function in response

I have a set of database records that are being displayed in separate div elements on the page. Each record corresponds to a specific ID, with its information displayed inside the div. My goal is to create a delete button for each record that would allow ...

Tips for obtaining consistent legend and tooltip for dynamically generated data in Vue using vue-chartjs

I am currently working on creating a vue chart using vuechartjs that would display the numbers 10, 20, 30, 40, 50 repeatedly over several years. My main issue is getting the legend and tooltip to function correctly. At the moment, the label just shows an ...

Forwarding to another page following an AJAX post request to a Django view

I've been struggling to get this basic piece of code to work properly, despite trying numerous resources. I can't seem to pinpoint where I'm going wrong. Essentially, I have a javascript function submitData() that is supposed to make an ajax ...

The v-for in Vue is not displaying the accurate text in the modal window and is only showing the data for the first item

In the process of learning Vue and Bootstrap, I am creating a blog where I want a modal window to pop up with the post information when the user clicks on the comment button. However, the issue I'm facing is that the modal only displays information fr ...

Implementation of Material UI Autocomplete feature with options consisting of an array of objects linking to both ID and label properties

Utilizing the Material UI Autocomplete component in my project has been a key feature. Referencing the official documentation, here are the available options: let options = [ { id: "507f191e810c19729de860ea", label: "London" }, { id: "u07f1u1e810c19 ...

Filter an array of objects recursively based on various properties

I need help filtering an object with nested arrays based on specific criteria. Specifically, I want to filter the main array by matching either RazaoSocial:"AAS" or Produtos:[{Descricao:"AAS"}] This is my code: var input = [ { RazaoSocial: 'AA ...

Implement various actions when the window is resized

The carousel code I have found returns a different number of items to display based on screen size. You can check it out here. $(function() { var mini = 1000; var big = 1280; if (window.screen.availWidth < mini) { $('#carousel1').jsCar ...

What is the comparison between actual pixels and text size in Internet Explorer?

Can you determine the actual font size in pixels corresponding to the following text size options in Internet Explorer? Largest Larger Medium Smaller Smallest In a web development project, I am looking to achieve a similar functionality to adjust the te ...

Tips for altering the appearance of the material-ui slider thumb design when it is in a disabled state

Through the use of withStyles, I have successfully customized the style of the Slider: const CustomSlider = withStyles(theme => ({ disabled: { color: theme.palette.primary.main }, thumb: { height: 24, width: 24, }, }))(Slider); How ...

Can data be transferred from the template to the script using Vue.js? (Opposite of v-bind)

Is it possible to pass the current data in a v-for loop (in the template) to a function in methods? <li v-for="annonce in annonces"> <article> //For example, can I send annonce.categorie to the methods //object of the component t ...

Javascript challenges for beginners in coding world

After running the code snippet, I encountered the following error messages: at Module._compile (module.js:456:26) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:312:12) at Fun ...

Navigating through intricate JavaScript objects

I am working with an object that looks like this: var obj = { "00a9": ["\u00A9", ["copyright"]], "00ae": ["\u00AE", ["registered"]], "203c": ["\u203C" ...

Tips for utilizing express in your typescript projects

I'm curious about the transition of definition files from tsd to typings, and now to @types. How can I incorporate @types in a node/express project? What is currently preferred and what's the reason for moving from tsd to typing and finally to @t ...

Renaming form elements using JQuery's .load method

This is a page named A.html <form name=form> <input type=text id = txtA> </form> When I use jQuery to load it into B.html, it loads multiple times. <form name=form> <input type=text id = txtA> </form> <form name=f ...

The circular reference error in Typescript occurs when a class extends a value that is either undefined, not a constructor,

Let me begin by sharing some context: I am currently employed at a company where I have taken over the codebase. To better understand the issue, I decided to replicate it in a new nestjs project, which involves 4 entities (for demonstration purposes only). ...