title: How can I get an element to appear directly when I expand a row using Vue
body: <p>I am an extreme beginner to Vue and am trying to to create a data table that when you click a row it expands and shows charts. With this I'm having two issues if you can help me out. When I click on a row nothing appears but then when I click on another one, graphs appear in the first. The second is that I would like to only have one row open at a time. </p>
  
  <p>Thanks in advance!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="right-side-table"&gt;
    &lt;el-table :data="" style="width: 100%; max-height: 100%" element-loading-text="" highlight-current-row empty-text="N/A" @expand="handleRowExpansion"&gt;
  
      &lt;el-table-column type="expand"&gt;
          &lt;template scope="props"&gt;
              &lt;p&gt;#: {{ props.row.dateUTC }}&lt;/p&gt;
              &lt;p&gt;#: {{ props.row.creator }}&lt;/p&gt;
              &lt;p&gt;#: {{props.row.type }}&lt;/p&gt;
              &lt;p&gt;#: {{ props.row.labels }}&lt;/p&gt;
              &lt;p&gt;#: {{ props.row.uid }}&lt;/p&gt;
              &lt;canvas id="myChart4" width="300" height="300"&gt;&lt;/canvas&gt;
              &lt;canvas id="myChart6" width="300" height="300"&gt;&lt;/canvas&gt;
              &lt;canvas id="myChart5" width="300" height="300"&gt;&lt;/canvas&gt;
                                      
                     
              &lt;div&gt;
                  &lt;el-button type="primary" @click=""&gt;Review&lt;/el-button&gt;
              &lt;/div&gt;
          &lt;/template&gt;
      &lt;/el-table-column&gt;
      &lt;el-table-column prop="name" label="Name" sortable show-overflow-tooltip&gt;&lt;/el-table-column&gt;
      &lt;el-table-column prop="" label="" sortable show-overflow-tooltip&gt;&lt;/el-table-column&gt;
      &lt;el-table-column prop="" label="" sortable show-overflow-tooltip&gt;&lt;/el-table-column&gt;
      &lt;el-table-column prop="" label="" sortable show-overflow-tooltip&gt;&lt;/el-table-column&gt;
      &lt;el-table-column prop="" label="" sortable show-overflow-tooltip&gt;&lt;/el-table-column&gt;
    &lt;/el-table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>