搜索内容后,点击事件没有反应

问题描述 投票:0回答:1

我创建了搜索内容的数组值的内容的搜索功能,点击事件不会响应。titlebody.另外,在标题上有一个选项,然后在正文的下拉菜单上按一下,但是搜索之后,点击事件就没有反应了。我想这是因为点击的功能在挂载方法上,但试着把它替换成方法,但不能正常工作。

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

例子:enter image description hereenter image description here

如何解决这个问题?

javascript jquery vue.js vuejs2
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.