title: Vue Show more in deep array
body: <p>I am trying to add a &quot;show-more&quot; button to an array(v-for) of an array (v-for).</p>
  <pre class="lang-html prettyprint-override"><code>&lt;li v-for=&quot;(recruiter, key) in recruiters.data&quot; :key=&quot;recruiter.id&quot;&gt;
    &lt;div v-if=&quot;recruiter.cities&quot; &gt;
      &lt;div v-if=&quot;recruiter.cities.length &lt;= 5 || recruiter.id in cities_expand&quot;&gt;
        &lt;a :href=&quot;'/rekryterare/' + city.slug&quot; v-for=&quot;(city, index) in recruiter.cities&quot;&gt;{{ city.name }}&lt;/a&gt;
      &lt;/div&gt;
      &lt;div v-else&gt;
        &lt;template v-for=&quot;(city, index) in recruiter.cities&quot;&gt;
          &lt;template v-if=&quot;index+1 &lt;= 4&quot;&gt;
            &lt;a :href=&quot;'/rekryterare/sverige/' + city.slug&quot; &gt;{{ city.name }}&lt;/a&gt;
          &lt;/template&gt;
        &lt;/template&gt;
        &lt;a href=&quot;#&quot; @click.prevent=&quot;cities_expand.push(recruiter.id)&quot; &gt;...&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  <p>Basically if there is more than 4 items in <code>recruiter.cities</code> -&gt; show 4 items + &quot;show more&quot;</p>
  <p>However - the <code>recruiter.id in cities_expand</code> does not work/update?</p>
  <p>I'm sure there is a better way of solving this - but nothing else came to mind :)
  Any ideas?</p>