javascript - 搜索和过滤手风琴的数据在 vuejs 中不起作用

Question

我正在尝试在 vuejs 中为手风琴实现搜索和过滤功能。

首先，我在“搜索和过滤的数据将不是手风琴功能”一词之后进行了正确的搜索。这是我到目前为止所拥有的：

.accordion
    width: 100%
    //max-width: 360px
    margin: 30px auto 20px
    background: #FFF
    -webkit-border-radius: 4px
    -moz-border-radius: 4px
    border-radius: 4px
    .link
      cursor: pointer
      display: block
      padding: 15px 10px 15px 34px
      color: #000
      font-size: 14px
      font-weight: 700
      border-bottom: 1px solid #CCC
      position: relative
      -webkit-transition: all 0.4s ease
      -o-transition: all 0.4s ease
      transition: all 0.4s ease
      +mobile
        font-size: 12px
        padding: 10px 10px 10px 34px  
    li
      &:last-child .link
        border-bottom: 0
      i
        position: absolute
        top: 16px
        left: 12px
        font-size: 18px
        color: #595959
        -webkit-transition: all 0.4s ease
        -o-transition: all 0.4s ease
        transition: all 0.4s ease
        +mobile
          top: 8px
        &.fa-chevron-down
              right: -10px
              left: auto
              font-size: 16px
              width: 40px
              height: 30px
              text-align: center
              display: block
              overflow: hidden                  
              +mobile
                position: absolute
                right: -16px
      &.open
        .link
          color: $danger
        i
          color: $danger
          &.fa-chevron-down
            -webkit-transform: rotate(180deg)
            -ms-transform: rotate(180deg)
            -o-transform: rotate(180deg)
            transform: rotate(180deg)
        i.far
          color: $danger
          background: $danger
          border-radius: 50px
          border: 2px solid $gray
          font-size: 12px
  .submenu
      display: none
      background: #DADADA
      font-size: 14px
      li
          border-bottom: 1px solid $lightgray
          display: block
          text-decoration: none
          color: #000
          padding: 12px
          padding-left: 10px
          -webkit-transition: all 0.25s ease
          -o-transition: all 0.25s ease
          transition: all 0.25s ease
          &:hover
              background: $lightgray
              color: #fff
          i.far
            position: inherit
            top: 16px
            left: 12px
            background: #fff !important
            color: #fff !important 
            border: 2px solid $danger !important; 


export default {

data() {
return {
searchText: '',
keywords:[

      {
          question : `How to register user to example.com?`,

          answer : [
              { texts : 'To register new user click on below URL' },
              { texts : 'www.example.com' },
              { texts : 'Enter mail address and click on create free account.' }
            ]
      },

      {   question: 'How to or who will receive OTP to continue registration?',
        answer: [
            {texts:'Once clicked on create free account it will redirect to next OTP page. Entered mail address '}
          ]
      },

      {   question: 'How to fill registration details?',
        answer: [
            {texts:'Once the registration details page is opened fill all the required details '}
          ]
      },
    ],
  },
}

<!-- Accordion Function -->
mounted() {
  let Accordion = function(el, multiple) {
  this.el = el || {};
  this.multiple = multiple || false;
  let links = this.el.find('.link');
  links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
}
  Accordion.prototype.dropdown = function(e) {
  let $el = e.data.el,
  $this = $(this),
  $next = $this.next();
  $next.slideToggle();
  $this.parent().toggleClass('open');			
  if (!e.data.multiple) {
  $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
  };
}
  let accordion = new Accordion($(this.$refs.accordion), false);
},

<!-- search and filterfunction-->
computed : {
   itemsSearched : function(){	  
   return this.keywords.filter((keyword) =>{
   return 
  keyword.question.toLowerCase().match(this.searchText.toLowerCase());
   });
  },
},

<input v-model="searchText" class="input form-control has-text-centered search-input" placeholder="Type your keywords"> 

<ul id="accordion" class="accordion" ref="accordion">			
<li v-for="value in itemsSearched">
	<div class="link">
		<i class="far fa-circle"></i>{{ value.question }}<i class="fa fa-chevron-down"></i>
	</div>
	<ul class="submenu">
			<li v-for="sub in value.answer"><i class="far fa-circle"></i> {{ sub.texts }}</li>
	</ul>
</li>
</ul>

标签： javascriptjqueryvuejs2vue-component