xpage Vue.js中的Vue js属性

时间:2018-05-30 11:40:52

标签: vue.js xpages

运行xpage时未呈现的属性: :源代码:

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

脚本

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();
   }
});

输出:

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

为什么这些属性无法呈现的任何想法?

只有xpage标签的例子是正确生成的,但问题是当spabn在v-for循环中时

编辑围绕代码的问题是当VUE.js达到并运行循环

1 个答案:

答案 0 :(得分:0)

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

呈现

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

所以,它有效。

我猜您在源面板中有语法错误,您的更改尚未生效。