首页 新闻 搜索 专区 学院

framework7中,js添加的html,怎么绑定事件或添加自定义方法

0
悬赏园豆:20 [已解决问题] 解决于 2020-04-24 12:22

在framework7中,我从ajax中返回数据,将数据拼接成html,最后添加到页面中。但是既不能直接执行自定义的js方法,也不能使用@click的方式绑定,方法中再带上参数,就更不知道怎么搞了,请问大家应该怎么处理呢? 排版乱糟糟的,各位大神见谅

<template>
<div class="page">
<!-- 顶部 -->
<div class="navbar navbar-large-transparent">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a href="/Message/List/" class="link icon-only">
<i class="icon f7-icons">
email_fill
<span class="badge color-red">5</span>
</i>
</a>
</div>
<div class="title">新闻中心</div>
<div class="right">
<a href="/Search/" class="link icon-only">
<i class="icon f7-icons">
search
</i>
</a>
</div>
</div>
</div>

    <div class="page-content">
        <!--顶部导航-->
        <div id="BusinessTypeList" class="xscrollmenu">

        </div>
        <!-- 新闻列表 -->
        <div class="list media-list" style="margin-top:1px;">
            <ul id="newslist">
                
            </ul>
        </div>
    </div>
</div>

</template>
<script>
return {
data: function () {
return {}
},
methods: {
//检索分类的新闻列表
ChooseBusinessType: function (Id) {
var oBt = document.getElementById('bt' + Id);
var newClass = oBt.className + ' xscrollmenu-item-active';
oBt.className = newClass;
},
},
on: {
tabMounted: function (e, page) {
console.log('tab mounted');
var param = {};
param.Key = '';
BusinessType.GetList(param, function (list) {
var oDivBtl = document.getElementById('BusinessTypeList');
var arrHtml = [];

                for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                    arrHtml.push('<div id="bt'+item.Id+'" class="xscrollmenu-item"><a href="javascript:;" @click="test" class="text-color-black">' + item.Name + '</a></div>');
                }

                oDivBtl.innerHTML = arrHtml.join('');
            });
        }
    }
};

</script>

在JS中的这一段怎么写呢?
第一种方式:因为是ajax后加载的,@click 没有解析
arrHtml.push('<div id="bt'+item.Id+'" class="xscrollmenu-item"><a href="javascript:;" @click="ChooseBusinessType" class="text-color-black">' + item.Name + '</a></div>');
第二种方式:onclick根本在framework7中根本不会执行
arrHtml.push('<div id="bt'+item.Id+'" class="xscrollmenu-item"><a href="javascript:;" onclick="ChooseBusinessType('+item.Id+')" class="text-color-black">' + item.Name + '</a></div>');

水知寒的主页 水知寒 | 初学一级 | 园豆:-2
提问于:2019-10-22 16:32
< >
分享
最佳答案
0
<!-- 把 HTML 写在 template 里面,不要用 innerHTML -->
<div id="BusinessTypeList" class="xscrollmenu">
  <div v-for="item in list" :id="`bt${item.Id}`" class="xscrollmenu-item"><a href="javascript:;" @click="test" class="text-color-black">{{item.Name}}</a></div>
</div>

...

// 数据放在 data 里
data: function () {
  return {
    list: []
  }
},
...
BusinessType.GetList(param, function (list) {
  this.list.push(...list) // 这里的 this 不一定对,代码是我云的,this 要指向这个 Vue 实例,实在不行把  function 改成箭头函数
}
收获园豆:20
by.Genesis | 小虾三级 |园豆:1617 | 2019-10-23 09:51

非常感谢

水知寒 | 园豆:-2 (初学一级) | 2020-04-24 12:22
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册