title: How to hide second row of spans in div with a toggle of v-show?
body: <p>I'm quite confused how to work around this one.
  <a href="https://i.stack.imgur.com/WuuCX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WuuCX.png" alt="enter image description here" /></a>
  Basically I want to hide the second row to any row proceeding the first row when user clicks the &quot;Advanced Search&quot;. I've achieved in only hiding the full span of pills but I want it that only the first row remains shown and the other rows hidden. The pills aren't put in a grid col or row but only bunched up with a <code>&lt;span&gt;</code> and some margin &amp; paddings. Anyone can guide me how to achieve this? Code goes as follows</p>
  <pre class="lang-html prettyprint-override"><code>&lt;v-row class='mx-2'&gt;
      &lt;v-col class='d-flex pt-2 mt-1'&gt;
        &lt;!-- MYTODO: Put Toggle v-show to hide/show the down pills --&gt;
        &lt;span style='align-self: center; margin-right: 14px' @click='isShowPills = !isShowPills'
              class='advance-search-toggle'&gt;
                  Advanced search ({{ searchFieldKeys.length }} results)
                  &lt;v-icon
                    size='24'
                    style='margin-left: 11px'
                  &gt;
                    {{ advanceSearchIcon }}
                  &lt;/v-icon&gt;
                &lt;/span&gt;
        &lt;div v-show='isShowPills'&gt;
          &lt;template v-for='field in searchFieldKeys'&gt;
            &lt;v-chip
              v-if='searchFields[field].value'
              :key='field'
              close
              color='#fff'
              pill
              text-color='#7B7B7B'
              class='searched-field mr-2 mt-2'
              @click:close='removeSearchCondition(field)'
            &gt;
               &lt;span&gt;
                 {{ searchFields[field].text }} : {{ searchFields[field].value | formatSearchVal }}
               &lt;/span&gt;
            &lt;/v-chip&gt;
          &lt;/template&gt;
        &lt;/div&gt;
      &lt;/v-col&gt;
    &lt;/v-row&gt;
  </code></pre>
  <p>Data goes as follows:</p>
  <pre class="lang-js prettyprint-override"><code>data(){
     return {
       isShowPills: true,
       ...otherData
     }
  }
  computed() {
     advanceSearchIcon() { // MYTODO
        return this.isShowPills ? 'mdi-chevron-down' : 'mdi-chevron-up';
      },
     ...other Computed
  }
  </code></pre>