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>');
最佳答案
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
非常感谢
