Vue.js templating and interpolation- not rendering data

Question

I am trying to build a reviews page using Vue.js which will take an array of objects and insert a section on the page for each review in the array. It should also display the corresponding name, rating, review text, etc.

The following code is half-way working. The data is getting set correctly to the Vue and it's building out all the divs on the page, however the interpolation is not working. The divs are empty; the data is not being displayed.

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);
        }
    });
});

And the reviews item (res.res) has this structure(with real data, obviously):

[{name: , rating: , review: , time: , title:}, {name: , rating: , review: , time: , title:}]

Linx · Accepted Answer · 2017-06-08 18:06:32Z

5

The problem is that I'm using SWIG in this application and it uses the same interpolation syntax- {{}}. To avoid this issue, you can set your own custom syntax to the Vue object like so:

var reviewsVue = new Vue({
    el: '#review-holder',
    data: {
        reviews: reviews
    },
    delimiters: ["((","))"]
});

And then the HTML looks like this:

<div class="reviews-holder hidden" id="review-holder">
    <div v-for="review in 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 v-for="star in review.stars"class="pull-right rating rating-header">
                    <span>((star))</span>
                </div>
            </div>
        </div>
        <h4>((review.title))</h4>
        <span class="review-text">((review.review))</span>
    </div>
</div>

answered Jun 8, 2017 at 18:06

Linx

7635 gold badges18 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Javed Over a year ago

I faced the same issue while using Vue with Django - Django template uses {{}} for interpolation; Your answer helped, thanks!

Collectives™ on Stack Overflow

Vue.js templating and interpolation- not rendering data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related