Vue js attributes in xpage Vue.js - 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.