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を使用しており、同じ補間構文 - {{}}を使用しています。この問題を回避するには、あなたはとても気に入りオブジェクトに独自のカスタム構文を設定することができます。

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>