Vue js attributes in xpage Vue.js

Question

Attributes not rendered when running xpage: :Source code:

<div id="categories" class="article-search-results-categories">
<ul class="table-view">
<li class="table-view-cell  pr40" v-for="row in list.categories"> 
<xp:span id="clickSpan">{{row.name }}
<xp:this.attrs>
   <xp:attr name="v-on:click" value="alert('ok')" rendered="true" 
</xp:attr>
</xp:this.attrs>
</xp:span>
</li>
</ul>


</div>

Script

var app = new Vue ({
   el: '#app',
   data: {
      list:[]
   },
   methods:{
    getUsers: function(){
        var link = 'https://jsonplaceholder.typicode.com/users';
        this.$http.get(link).then(function(response){
            this.list = response.data;
        }, function(error){
            console.log(error.statusText);
        });
    }, 

    getCategoryJSON: function(){

        var config  = {
                headers : {
                'Content-Type' : 'application/json'
            }
        }

        var data = {
                "supplierid": "DAHL"
            };

        data = JSON.stringify(data);

        axios.post
('ProductViewJSONCtrl.xsp',data,config).then(function(response){
            app.list = response.data;

        }, function(error){
            console.log(error.statusText);
        });


      },
     getLevel: function(row){
        console.log('clicked');
     }
  },
   mounted : function(){
        console.log("in mounted");
        this.getCategoryJSON();
   }
});

Output:

<span id="view:_id1:_id2:_id295:includeBody:_id328:clickSpan">VA- 
armatur/Stängventiler</span>

Any ideas why these attributes can't render?

The example with just the xpage tag is correctly generated but the problem is when the spabn is in the v-for loop

Edited m surrounding codeas the problem is when VUE.js attahces and runs for loop

Answer 1

This

<xp:span
    id="clickSpan">
    {{row.name }}
    <xp:this.attrs>
        <xp:attr
            name="v-on:click"
            value="alert('ok')"
            rendered="true" />
    </xp:this.attrs>
</xp:span>

renders

<span id="view:_id1:clickSpan" v-on:click="alert('ok')">{{row.name }}</span>

So, it works.

I guess you have a syntax error in source panel and your changes don't take effect yet.