title: Vue accessing an array within in an array
body: <p>I want to access data from a prop that has an array within an array, I have to type tons of <code>v-for</code> statements to access the data. </p>
  
  <p>Currently I have to cycle through the <code>spaces</code> array (check if their id matches with the one I want) and use an <code>v-if</code> statement to output only the one I want, then I repeat that cycle for <code>rooms</code> (check ids again).</p>
  
  <p>Is there a way to <code>filter</code> through arrays within arrays? Without these for/if statements? I've been reading into filters but haven't been able to figure it out for what I need.</p>
  
  <p>Vue file:</p>
  
  <pre><code>               &lt;v-flex hidden-sm-and-down sm4 lg4 class="sidebarSticky"&gt;
                      &lt;v-layout v-for="space in spaces"
                                v-if="space.id === selectedSpace"
                                :key="space.id"
                      &gt;
                          &lt;!-- 1 room details --&gt;
                          &lt;v-flex v-for="room in space.rooms"
                                  v-if="selectedRoom === room.id"
                                  v-if="selectedRoom "
                                  :key="room.id"&gt;
                              &lt;v-card&gt;
                                  &lt;v-card-text&gt;
  
                                      &lt;!-- room name --&gt;
                                      &lt;h2 class="sidebarRoomName"&gt; {{ room.name }} &lt;/h2&gt;
                                      &lt;!-- description --&gt;
                                      &lt;p&gt; {{ room.description }} &lt;/p&gt;
  
                                  &lt;/v-card-text&gt;
                              &lt;/v-card&gt;
                          &lt;/v-flex&gt;
                      &lt;/v-layout&gt;
                  &lt;/v-flex&gt;
  </code></pre>
  
  <p>My Data:</p>
  
  <pre><code>    new Vue({
          el: '#app',
          data: () =&gt; ({
              selectedSpace: 0;
              selectedRoom: 1,
              spaces: [
                  {
                      id: 0,
                      name: 'House in Amsterdam',
                      rooms: [
                          {
                              id: 0,
                              name: 'My epic living room'
                          },
                          {
                              id: 1,
                              name: 'My epic room'
                          }
                      ]
                  },
                  {
                      id: 5,
                      name: 'House in Paris',
                      rooms: [
                          {
                              id: 0,
                              name: 'My epic bathroom'
                          }
                      ]
                  }
              ]
          })
      })
  </code></pre>
  
  <p>The code above might seem very simple, but I'm working with a lot more data and it can be super difficult to work with.</p>