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:}]

Answer 1

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>