title: How to show and hide rows in v-data-table Vue.js + Vuetify
body: <p>I'm new at Vue developer and I make a V-Data-Table consuming a JSON with vue-resource. That´s done already, but now I want to show/hide child rows based on user selection. </p>
  
  <p>e.g.: click on '+' and the table shows the rows, click on '-'and the table hide the rows.</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-app&gt;
      &lt;div&gt;
        &lt;v-flex xs12 sm6 d-flex&gt;
          &lt;v-select
            v-if="retornoDoJson"
            :items="retornoDoJson.nations"
            v-model="paisSelecionado"
            label="Selecione Um"
            v-on:change="selectionChanged"
            single-line
            menu-props="bottom"
          &gt;&lt;/v-select&gt;
        &lt;/v-flex&gt;
      &lt;/div&gt;
      &lt;div v-if="paisSelecionado"&gt;
        &lt;v-data-table :headers="headers" :items="retornoDoJson.top_10s[paisSelecionado]" hide-actions&gt;
          &lt;template slot="items" slot-scope="props"&gt;
              &lt;v-btn fab dark color="indigo"&gt;
                  &lt;v-icon dark&gt;add&lt;/v-icon&gt;
              &lt;/v-btn&gt;
              &lt;td class="parent-row"&gt;{{ props.item.name }}&lt;/td&gt;
              &lt;td class="child-row"&gt;{{ props.item.club }}&lt;/td&gt;
              &lt;td class="child-row"&gt;{{ props.item.phy }}&lt;/td&gt;
              &lt;td class="parent-row"&gt;{{ props.item.age }}&lt;/td&gt;
              &lt;td class="parent-row"&gt;{{ props.item.pas }}&lt;/td&gt;
              &lt;td class="child-row"&gt;{{ props.item.nationality }}&lt;/td&gt;
          &lt;/template&gt;
        &lt;/v-data-table&gt;
      &lt;/div&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {
        paisSelecionado:undefined,
        headers: [
          {
              text: ' ',
              align: 'left',
              sortable: false,
              value: 'name'
          },
          { text: 'name', value: 'name' },
          { text: 'club', value: 'club' },
          { text: 'phy', value: 'phy' },
          { text: 'age', value: 'age' },
          { text: 'pas', value: 'pas' },
          { text: 'nationality', value: 'nationality' }
  
        ],
        retornoDoJson: []
      };
    },
    methods: {
      loadApi() {
        this.$http
          .get("http://localhost:8080/data.json")
          .then(this.successCallback, this.errorCallback);
      },
      successCallback: function(resposta) {
          this.retornoDoJson = resposta.data;
          console.log(this.retornoDoJson);
      },
      selectionChanged: function() { 
        console.log("selecionarItem:this.selecionarPais:", this.paisSelecionado); 
      }
    },
    mounted() {
      this.loadApi();
    }
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>There's any way to do that?</p>