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

Question

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

以下代码已完成一半工作。数据已正确设置到 Vue，并且正在构建页面上的所有 div，但是插值不起作用。div 为空；数据未显示。

超文本标记语言

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