Vue.js模板和插值 - 不渲染数据

Question

我正在尝试使用Vue.js构建一个评论页面，它将获取一组对象，并在页面中为数组中的每个评论插入一个部分。 它还应显示相应的名称，评级，评论文本等。

以下代码是中途工作。 数据正确设置到Vue并且它正在构建页面上的所有div，但插值不起作用。 div是空的; 数据未显示。

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

评论项目（res.res）具有这种结构（显然有真实数据）：

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

Answer 1

问题是我在这个应用程序中使用SWIG，它使用相同的插值语法 - {{}}。 要避免此问题，您可以将自己的自定义语法设置为Vue对象，如下所示：

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

然后HTML看起来像这样：

<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>