The art of Vue.js templating and interpolation goes beyond simply rendering data

I'm in the process of creating a reviews page using Vue.js. The goal is to take an array of objects and dynamically insert a section on the page for each review in the array, displaying details like name, rating, and review text.

The current code implementation is partially functional. The data is successfully passed to Vue and all the necessary HTML structures are created on the page. However, there seems to be an issue with interpolation as the content is not being displayed within the divs.

HTML

<div class="reviews-holder" id="review-holder">
    <div v-for="review of reviews" class="review-container">
        <div class="row border-bottom">
            <div class="col-sm-6 col-xs-12">
                <h5>{{ review.name }}</h5>
                <p>Reviewed on {{ review.time }}</p>
            </div>
            <div class="col-sm-6 col-xs-12">
                <div class="pull-right rating rating-header">
                    {{ review.rating }}
                </div>
            </div>
        </div>
        <h4>{{ review.title }}</h4>
        <span class="review-text">{{ review.review }}</span>
    </div>

JS

$(document).ready(function() {
    $.post("/api/getReviews", dto, function(res){
        if (res.ok) {
            console.log("res.res", res.res);

            var reviewsVue = new Vue({
                el: '#review-holder',
                data: {
                    reviews: res.res
                },
                components: {
                    VPaginator: VuePaginator
                },
                methods: {
                    updateResource(data){
                        this.reviews = data
                    }
                }
            });
            console.log('reviewsVue', reviewsVue);
        } else {
            console.log(res);
        }
    });
});

Below is the structure of the reviews item (res.res), filled with actual data:

[{name: , rating: , review: , time: , title:}, {name: , rating: , review: , time: , title:}]
javascriptvue.jsinterpolationtemplating

Answer №1

The issue at hand arises from my usage of SWIG within this particular application, which utilizes the same interpolation syntax- {{}}. To sidestep this predicament, a solution is to establish a custom syntax for the Vue object in the following manner:

var feedbackVue = new Vue({
    el: '#feedback-container',
    data: {
        feedback: userFeedback
    },
    delimiters: ["[[","]]"]
});

Subsequently, the HTML structure will take on the following appearance:

<div class="feedback-section hidden" id="feedback-container">
    <div v-for="entry in feedback" class="user-feedback">
        <div class="row border-line">
            <div class="col-sm-6 col-xs-12">
                <h5>[[entry.name]]</h5>
                <p>Shared on [[entry.datePosted]]</p>
            </div>
            <div class="col-sm-6 col-xs-12">
                <div v-for="starRating in entry.stars" class="rating-block">
                    <span>[[starRating]]</span>
                </div>
            </div>
        </div>
        <h4>[[entry.subject]]</h4>
        <p class="feedback-content">[[entry.content]]</p>
    </div>
</div>

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

Enhancing Raphael elements with event handling functionality

Greetings! I've been attempting to implement a mousemove and click event on an SVG Raphael Rectangle: Check it out here: http://jsfiddle.net/neuroflux/nXKbW/1/ Here's the code snippet: tile = ctx.rect(x*10,y*(i*10),10,10).attr({ fill:&apos ...

javascriptcanvassvgraphael

Customizing Background Image in Internet Explorer 10 with JavaScript

Lately, as I work on developing my website, I've added an option for users to change the background image. This feature worked perfectly fine on Windows 7 and XP using Internet Explorer, but recently I upgraded to Windows 8 with IE 10 and now changing ...

javascripthtmlinternet-explorer-10

Angular JS basic API: Displaying only information that starts with the term 'request'

I've been given the task of developing a straightforward AngularJS API. I have managed to set up the basics for displaying data, but I'm facing an issue where the table only retrieves data from the JSON file if it starts with "request". As a resu ...

javascripthtmlangularjsapiangularjs-ng-repeat

Guide on diverting response from an ajax request

I have a situation where I need to redirect to a page based on a response. I have successfully made an ajax call and can handle the success part. The response contains an html page, but I'm unsure of how to redirect to that page. Below is the code I ...

javascriptjqueryajax

Using jQuery ajax in PHP, the ability to remove retrieved information from a different page is a

I'm currently working on a jQuery AJAX PHP application that allows for adding, deleting, and displaying records using switch case statements to streamline the code. Everything seems to be functioning correctly with inserting and displaying records, bu ...

javascriptphpjqueryajax

Strange error message regarding ES6 promises that is difficult to interpret

Snippet getToken(authCode: string): Promise<Token> { return fetch(tokenUrl, { method: "POST" }).then(res => res.json()).then(json => { if (json["error"]) { return Promise.reject(json); } return new Token ...

javascripttypescriptes6-promisetypescript-typings

Transferring contacts from Gmail, Yahoo, Hotmail, Facebook, and Twitter

Looking to streamline the process of importing contacts from various platforms like gmail, yahoo, hotmail, and facebook using Google API's. Are there any libraries available that can handle this task or should I dive into writing code for all the diff ...

javascriptjqueryemailyahoo

The feature to disable open gesture hiding in Navigation Drawer on React Native seems to be malfunctioning

Our application utilizes a Navigation Drawer to display the side menu. However, there are certain screens where we do not want this navigation drawer to appear when the user performs left or right gestures. We have attempted to hide these particular scree ...

javascriptreact-nativenavigation-drawergesture

Pass data to all routes in ExpressJS

After logging in, I am setting req.session variables as follows: req.session.loggedin = true req.session.firstname = loginDetails.firstName; I would like to streamline this process and pass this information to ALL routes without manually adding them to ea ...

javascriptnode.jsexpressejs

How to transfer a parameter to a JavaScript function within an Ajax success callback?

While attempting to call the UpdateItem function using AJAX with an anchor tag, I encountered a console error. Error : req is undefined function updateItem(id, desc, vehicleno){ alert("i am here"); $('#ProcessModal').modal(&a ...

javascriptasp.netajaxasp.net-ajax

Issues with the functionality of the asynchronous socket.io JavaScript callback are being experienced

I am facing an issue with my JavaScript code that involves querying data from a database using Node.js and Socket.io. Currently, I have implemented setTimeout() functions to make it work, but I want to switch to using callbacks for better reliability. Howe ...

javascriptnode.jsasynchronouscallbacksocket.io

Vue.js encountered an Uncaught SyntaxError due to an unexpected identifier found at the import line

Every time I attempt to utilize Vue plugins, I encounter an Unexpected Identifier error on the import line. Any advice or suggestions? HTML <div id="content"> <h1>@{{ message }}</h1> <v-select :value.sync="selected" :options="opt ...

laravelvue.js

Is it possible for Angular 7 to disconnect from the internet?

I am looking to disable all buttons, clicks, and hyperlinks while displaying a backdrop with the message "GO ONLINE". It may come off as rude, but it is necessary. AppComponent (TS): The connectionMonitor can be used to monitor network connectivity. pr ...

javascriptangulartypescriptrxjs

What is the best way to identify which JavaScript code is triggering or managing an event?

In the development of an HTML5 application framework designed for businesses to use on their intranet and extranet sites, a SAP JEE application server is utilized. The framework incorporates the grid system known as "Semantic UI" along with various JavaScr ...

javascripthtmljqueryjquery-eventsdeveloper-tools

Best method for removing CrosshairMove event listener in lightweight charts

As per the documentation, using unsubscribeCrosshairMove allows us to remove a handler that was previously added with subscribeCrosshairMove. Our objective is to use unsubscribe... to eliminate previous handlers before re-subscribing with subscribe... af ...

javascriptlightweight-charts

Is there a way to develop a search script that can efficiently sift through the object using the provided script or a similar one?

$(document).ready(function(){ $.ajax({ dataType: 'jsonp', //data in jsonp contentType: "application/json; charset=utf-8", url: 'http://live.nhle.com/GameData/RegularSeasonScoreboardv3.jsonp', ...

javascriptjqueryajax

Activate the CSS on a click event using the onClick method

I am trying to implement a transition that triggers when clicking on a specific div element. Currently, the transition only occurs with the active css class. How can I achieve this effect by simply clicking on the div itself? I am using reactjs and believe ...

javascriptcssreactjs

What is the correct way to activate buttons within a v-for loop in Vue.js?

My current situation is as follows: https://plnkr.co/edit/LdbVJCuy3oojfyOa2MS7 https://i.sstatic.net/ivWnE.png I am looking to activate the "Press me" buttons when the input changes. At this point, I have a code snippet that can detect when the input h ...

javascriptvue.js

show JSON data following an Ajax request (Asynchronous)

I'm encountering an "undefined" error while attempting to render raw JSON using JSON.parse (result). function decodeVin(result) { var vinArray = JSON.parse(result); var results = "<h4>Vehicle Information Result:</h4>"; results += "Year: ...

javascriptjsonajaxhtml

Starting the node server using the port value specified in the .env file results in an error when attempting to restart the server

I have built a simple node application and specified the port number in the .env file. However, I am encountering an issue where when using app.listen(process.env.PORT,()=>{}), the server runs successfully the first time but when attempting to run it ag ...

javascriptnode.jsexpressenvironment-variables