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>