Unable to display value in Vue.js, however, the console log functions properly

As I embark on my journey with VueJS, I must admit that it is an amazing framework. However, I have encountered some issues with the Vue-Resource implementation, as it only seems to work properly half the time.

When attempting to retrieve data from my server, I have noticed that it does not always finalize the data retrieval process.

For instance, consider the code snippet below where I am making a request to my server. Despite the request being made, only half of the data gets loaded.

The response data that I am trying to parse appears in the following format:

[{ city: "New York", amount: 8 }, { city: "San Francisco", amount: 18 }]

The peculiar issue I am facing is that while logging the data to the console works perfectly fine, rendering it seems to remove the 'amount' property. It retains the 'city' values but eliminates the 'amount' associated with each location.

I have tried to find solutions for this problem based on Vue.js 0.9, but I am actually using Vue.js 2.3.3 and Vue-resource 1.3.3.

vm = new Vue({
el: '#devApp',
data: {
    citiesCount: [],
},
mounted: function()
{
    this.getLocationsCityCount();
    this.getLatestLocations();
},
methods: {
    getLocationsCityCount: function(cb)
    {
        var test = this.$http.get('/api/v1/locations/count/cities').then(
            success => {
                console.log(success.body.response);
                this.citiesCount = success.body.response;
            },
            error => {
                console.log('error');
                console.log(error);
            }
        );
    },
}

});

Answer №1

Not from a template, but I have experimented with some static content.

Check out this sample template:

<div id="devApp" class="panel panel-default">
<div class="panel-heading">
    <h4 class="panel-title">Location breakdown by city</h4>
</div>

<ul class="list-group location-list">
    <li class="list-group-item" v-for="item in citiesCount">@{{item.city}}<span class="badge">@{{item.amount}}</span></li>
</ul>

Answer №2

In Laravel Blade, the use of the @{{ data }} sign is essential.

Simply loop through your data to display each item.

Check out this functional example:

https://jsfiddle.net/khenxi/djcner34/

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

The Axios post request is mistakenly sending my data as the key with an empty value instead of sending the entire data object itself

I began by developing the frontend, but now I am looking to create the backend in order to establish a connection with a database. const express = require("express"); const bodyParser = require("body-parser"); const cors = require(" ...

Why are the links in the navgoco slide menu failing to function properly?

I utilized a demo from jQueryRain to create a collapsible menu using jQuery. However, after completion, I discovered that none of the links were functioning properly. Upon visiting the documentation page, I noticed that many users were encountering the sam ...

The prop type for `rows` is invalid in `ForwardRef(DataGrid)`. It was supplied as an object instead of the expected array

Hello there! I'm puzzled as to why my grid table isn't displaying data even though I can confirm that I am receiving data from the API response. I'm wondering what might be wrong with my code. Below is my current code along with the returned ...

Guide on transforming OBJ/FBX files into GLTF format prior to adding them to your scene with Threejs

Currently, I am working on developing a web application that allows users to upload obj/fbx files and view them directly in the browser. The utilization of OBJLoader and FBXLoader provided by Threejs has been successful so far. However, I have a specific r ...

What is the most efficient way to post an array and iterate through it using PHP?

As the user types into an input field, jQuery's replace function is used to immediately create an array. The objective is to send these values to PHP for a live search on a specific MySQL table. I've managed the input field and the ajax call, bu ...

Can Mustache syntax {{}} be used to inject a Vue component?

I am dealing with a markdown file that includes YAML frontmatter. Within the frontmatter, I am trying to reference a component like so: --- title: Hello world component: <component-a></component-a> --- Lorem ipsum... My goal is to reference th ...

Retrieving selected options from a jQuery mobile multiselect for database storage

I'm currently working on extracting values from a select list in a jQuery mobile application. Here's the markup for my select element: <div data-role="fieldcontain"> <label for="stuff" class="select">Stuff:</label ...

Is there a way to utilize JavaScript and AJAX to save a WordPress cookie and log in a user, all without the need for any plugins?

My goal is to log in to WordPress using only ajax requests. Here's the code I have so far: var username = data.username; var password = data.password; var wp_login_url = "http://local_Ip/api/user/generate_auth_cookie/?username=" +username + "&pas ...

Tips for retrieving the text from a child element in a list with jQuery

I'm having trouble accessing the text of a child element within a list. I can only access the parent element and not sure how to get to the child element. Here is the HTML code: <ul class="nav nav-list"> <li class="active"> < ...

Can I simultaneously execute nodemon and browser-sync using a single npm script for an Express application?

Within my Express application, I utilize both nodemon and browser-sync in conjunction. These npm scripts are included in my package.json: "scripts": { "start": "node ./bin/www", "start:nodemon": "nodem ...

Alignment issue with procedural plane vertices in threeJS

In my project, I am utilizing threeJS along with a Simplex noise algorithm to create a tile system consisting of 50x50 planes. Currently, I am iterating through x+y and adding each plane. The Simplex noise algorithm is then used to calculate the z position ...

Vue and Jexcel: maximizing efficiency with event handling and dynamic calculations

I am trying to utilize the vue wrapper for jexcel and want to trigger the undo function from the toolbar computed field. However, I am facing difficulties accessing the spreadsheet instance as it throws an error saying 'this.undo is undefined.' ...

Click event to verify, delete, and include class identifier in angular13

Looking to enhance functionality by dynamically adding and removing the 'active' class to 'li a' elements on click. While the current code performs well when clicking from top to bottom, it fails to work in reverse order. component.htm ...

What steps should be taken to ensure the proper functioning of og: meta tags in NextJS?

Adding OpenGraph meta tags to a page in my NextJS app has presented some challenges. I inserted the meta tags within the <Head> component that is accessible through next/head. After testing the OpenGraph data with tools like the Facebook Sharing Deb ...

Executing various tasks concurrently with web workers in Node.js

Looking to read multiple JSON files simultaneously and consolidate the data into a single array for processing on a Node.js server. Interested in running these file readings and processing tasks concurrently using web workers. Despite finding informative ...

Tips for displaying content in a stacked format when hovering, similar to a list item (<li>), using jquery/javascript

I am attempting to display different content on hover over text, specifically listing various HTTP error codes. My setup includes 3 icons and text that will reveal specific content based on the text hovered over: success error blocked Below is the JS cod ...

What are some methods for altering ReadOnly values?

I am encountering an issue with the value fetchOptions: Readonly<HttpFetchOptionsWithPath> and my attempt to overwrite one of its properties. Here is the method I have tried: ((fetchOptions as Writable<HttpFetchOptionsWithPath>).headers as Wr ...

Filter the ng-repeat list dynamically by triggering ng-click event

I am currently developing an application on that requires users to be able to filter a list of credit cards by clicking on filters located on the interface, such as filtering for only Amex cards or cards with no fees. Although I have successfully bound t ...

Slide your finger upwards to shut down the mobile navbar in bootstrap

Hey there, I'm currently developing a website using Bootstrap framework v3.3.4. I have a mobile navbar that opens when I click a toggle button, but I would like it to slide up to close the navigation instead. Here is an image showing the issue Do y ...

Gulp: executing a task with no specified output location

I am attempting to create a straightforward task to display the file size for each file in an array of paths using the gulp-size plugin, as shown below: var gulp = require('gulp') var size = require('gulp-size') gulp.task('size&a ...