JSPでVue.jsディレクティブが機能しない

Question

私は、いくつかの反応的なvueJSをJSPファイルに組み込みたいと考えています。しかし、VueディレクティブはJSPパーサによって認識されず、これによりエラーがスローされます：net :: ERR_INCOMPLETE_CHUNKED_ENCODING。

例は次のとおりです。

ここ

<tbody id="items-${job.id}" v-for="item in items"> <tr>Item id = {{item.id}}</tr> ....

V-のためのディレクティブが問題のようです。

とにかくこれを解決するように提案できますか？私は私のJSP内でVueを使いたいと思っています。

Answer 1

私は誤った要素に私のvue 'el'を参照していたので、上記のコードは機能しませんでした。

次のスニペットは動作し、JSPでVue.jsを使用できることを示しています。

<div id="vue-test"> 
    <div v-for="item in items" :key="item.id">  
    <p>Item id={{item.id}}, jobItemStatus = {{item.jobItemStatus}}</p> 
    </div> 
</div> 
<script src="https://unpkg.com/vue/dist/vue.js"></script> 
<script>  
var vueItems = new Vue({ 
    el: '#vue-test', 
    data: { 
     items : [] 
    }, 
    mounted: function(){ 
     <c:forEach items="${job.jobItems}" var="item" varStatus="status"> 
      this.items = this.items.concat({ 
       id: ${item.id}, 
       receptionDate : "${item.receptionDate}", 
       deliveryDate : "${item.deliveryDate}", 
       jobItemStatus : "${item.jobItemStatus}" 
       });    
     </c:forEach> 
    } 
}); 
</script>