title: Vue.js - How to access computed property of Child Component (Vuetify Data Tables)
body: <p>I am new to vue.js and vuetify.
  I have created a table with Vuetify Data Tables component. The table has checkboxes in first column and a "select all" checkbox in the first column in header.
  The table is searchable with the build-in search function of the Data Tables component. Here is the problem:</p>
  
  <p>When the table is filtered after searching and the "check all" checkbox is clicked, all rows are checked, even the currently not displayed ones.
  Currently not displayed rows shouldn't be checked. To fix this behaviour I want to use the built-in computed property "filteredItems" of the Data Tables component. But after searching a few hours in the internet I couldn't find a solution. Can I do this without modifying the Data Table Component itself (maybe emitting an event)?</p>
  
  <p>In Vue.js Chrome Dev Tools I can see the values I need:</p>
  
  <p><a href="https://i.stack.imgur.com/aDqwG.png" rel="nofollow noreferrer">Computed property in Vue DEV Tools</a></p>
  
  <p>Here's my code:</p>
  
  <p>Data Table:</p>
  
  <pre><code>&lt;v-data-table           
          v-model="selected"
          :headers="headers"
          :items="items"
          :search="search"
          :loading="true"
          :pagination.sync="pagination"            
          :rows-per-page-items="[50,100,200]"
          select-all
          item-key="Hostname"            
          class="elevation-1"           
        &gt;
          &lt;template slot="headers" slot-scope="props"&gt;
            &lt;tr&gt;
              &lt;th&gt;
                &lt;v-checkbox
                  :input-value="props.all"
                  :indeterminate="props.indeterminate"
                  primary
                  hide-details
                  @click.native="toggleAll"
                &gt;&lt;/v-checkbox&gt;
              &lt;/th&gt;
              &lt;th
                v-for="header in props.headers"
                :key="header.text"
                :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
                @click="changeSort(header.value)"
              &gt;
                {{ header.text }}
                &lt;v-icon small&gt;arrow_upward&lt;/v-icon&gt;                  
              &lt;/th&gt;
            &lt;/tr&gt;
          &lt;/template&gt;
          &lt;v-progress-linear slot="progress" color="blue" height="2" v-show="progress_visibility" v-model="downloadPercentage"&gt;&lt;/v-progress-linear&gt;
          &lt;template slot="items" slot-scope="props"&gt;
            &lt;tr :active="props.selected" @click="props.selected = !props.selected"&gt;
              &lt;td&gt;
                &lt;v-checkbox
                  :input-value="props.selected"
                  primary
                  hide-details
                &gt;&lt;/v-checkbox&gt;
              &lt;/td&gt;
              &lt;td class="text-xs-left"&gt;{{ props.item.Hostname }}&lt;/td&gt;
              &lt;td class="text-xs-left"&gt;{{ props.item.FQDN }}&lt;/td&gt;
              &lt;td class="text-xs-left"&gt;{{ props.item.Subnet }}&lt;/td&gt;
              &lt;td class="text-xs-left"&gt;{{ props.item.MacAdress }}&lt;/td&gt;
              &lt;td class="text-xs-left"&gt;{{ props.item.SWProfile }}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/template&gt;            
        &lt;/v-data-table&gt;
  </code></pre>
  
  <p>The "Check All" function:</p>
  
  <pre><code>methods: {
    toggleAll () {
      if (this.selected.length)
        this.selected = []
      else
        // Here I want to access the computed property "filteredItems" of the data table
        this.selected =  this.items.slice()
    }
  </code></pre>
  
  <p>Thanks in advance!</p>