Vue.js directives do not work in JSP

Question

I wish to incorporate some reactive vueJS within my JSP file. However the Vue directives are not recognized by the JSP parser and this throws an error: net::ERR_INCOMPLETE_CHUNKED_ENCODING.

The example is :

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

Here the v-for directive seems to be a problem.

Anyway you can suggest to solve this ? I'd love to use Vue within my JSP.

Answer 1

The above code did not work because I was referencing my vue 'el' to the wrong element.

The following snippet works and shows that one can use Vue.js with JSPs.

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