我创建了搜索内容的数组值的内容的搜索功能,点击事件不会响应。title
或 body
.另外,在标题上有一个选项,然后在正文的下拉菜单上按一下,但是搜索之后,点击事件就没有反应了。我想这是因为点击的功能在挂载方法上,但试着把它替换成方法,但不能正常工作。
HTML。
<div class="block faq-block">
<div v-for="contents in filteredContents" class="col-sm-12 faq-elem">
<div class="faq-title">
<div>{{contents.title}}</div>
<i class="fa fa-plus"></i>
<i class="fa fa-minus d-none"></i>
</div>
<p>{{contents.body}}</p>
</div>
</div>
脚本。
export default {
props: [],
data: () => ({
saving: false,
search: '',
contents: [
{title: 'lorem ipsum',
body: 'lorem ipsum'},
{title: 'lorem ipsum',
body: 'lorem ipsum'},
]
}),
computed:
{
filteredContents: function () {
var self = this;
return this.contents.filter(function (cont) {
return cont.title.toLowerCase().indexOf(self.search.toLowerCase()) >= 0
|| cont.body.toLowerCase().indexOf(self.search.toLowerCase()) >= 0;
});
}
},
mounted() {
$('.faq-elem .faq-title').click(function (e) {
$(this).next('p').slideToggle();
let plus = $(this).find('.fa-plus');
let minus = $(this).find('.fa-minus');
if (plus.hasClass('d-none')) {
plus.removeClass('d-none');
minus.addClass('d-none');
} else {
plus.addClass('d-none');
minus.removeClass('d-none');
}
});
如何解决这个问题?