title: Unable to obtain the id of the element using v-if
body: <p>I am new to VueJS. I am developing an application using VueJS and Bootstrap. There is a div which I wish to render based on a condition.</p>
  
  <p>I have been trying to use <code>v-if</code> on the div so that once the condition is true, the data property is set to true and the div gets displayed.</p>
  
  <p>My code looks like this:</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-js lang-js prettyprint-override"><code>export default {
      
      data(){
        
        return {
  
          detailsSectionOpen: false
          
        }
     },
     
     methods:{
     
      showDetails() {
          if(this.detailsSectionOpen === false){
             this.detailsSectionOpen = true;
          }
          const detailsSection = document.getElementById("details");
          const showSection = document.getElementById("show");
          detailsSection.classList.add("col-xl-3");
          showSection.classList.add("col-xl-9", "col-md-6");
          showSection.classList.remove("col-xl-12", "col-md-6");
        },
     
     }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;div class="content" style="padding-top: 3px;"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-xl-12 col-md-6" id="show" style="padding-left: 0px;padding-right: 0px;"&gt;
  
          &lt;div class="container-fluid"&gt;
  
            &lt;ol class="breadcrumb" id="topButtons" style="display: flex;width: 100%;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;"&gt;
              &lt;li class="breadcrumb-item active" style="margin-right: auto; margin-left: 0px; padding-top: 13px; color: #424242; 
                  font-family: 'Source Sans Pro'; 
                  font-size: 18px; 
                  font-weight: normal; 
                  font-style: normal; 
                  text-decoration: none; 
                  text-align: left;"&gt;Files&lt;/li&gt; 
              &lt;li class="pull-right"&gt;
                &lt;button class="btn"&gt;
                  &lt;i class="fa fa-sort-amount-asc"&gt;
                  &lt;/i&gt;
                &lt;/button&gt;
              &lt;/li&gt; 
              &lt;li class="pull-right"&gt;
                &lt;button v-if="gridView === false" @click="changeView" class="btn"&gt;
                  &lt;i class="fa fa-th-large"&gt;&lt;/i&gt;
                &lt;/button&gt;
                &lt;button v-if="gridView === true" @click="changeView" class="btn"&gt;
                  &lt;i class="fa fa-list-ul"&gt;
                  &lt;/i&gt;
                &lt;/button&gt;
              &lt;/li&gt; 
              
            &lt;/ol&gt;
  
            &lt;!-- Line break --&gt;
            &lt;hr class="breadcrumb-hr"&gt;
  
          &lt;/div&gt;
  
        &lt;div class="container-fluid"&gt;
          &lt;div style="width: 280px; height: 30px; margin-left: 15px; "&gt;
            &lt;p style="color: #424242; font-family: 'Source Sans Pro'; font-size: 16px; font-weight: bold; font-style: normal; text-decoration: none; text-align: left;"&gt;Recent&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;!-- Recently used files section begins here --&gt;
          &lt;div class="row" style="padding-right: 15px; padding-left: 15px;"&gt;
            
            &lt;div class="col-md-5ths col-xs-6" v-for="(file,index) in recentFiles"&gt;
              &lt;stats-card&gt;
                &lt;div slot="header" class="header-rectangle" @contextmenu.prevent="$refs.menu.open"&gt;
                  &lt;img :src="file.source" style=" height: 50px; margin-top: 50px"&gt;
                &lt;/div&gt;
                &lt;div slot="footer" class="footer-rectangle" @contextmenu.prevent="$refs.menu.open" style="display: flex; flex-direction: column; justify-content: center;"&gt;
                  &lt;div class="row" &gt;
                    &lt;div class="col-xl-9"  style="display: flex;flex-direction: column;justify-content: center;"&gt;
                      &lt;div class="file-name-style"&gt;
                          &lt;span&gt;{{file.name}}&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class="file-size-style" &gt;
                        &lt;span&gt;{{file.size}} MB&lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-xl-3" style="display: flex; flex-direction: column; justify-content: center; margin-top:"&gt;
                      &lt;div v-show="!file.shared" style="float: right; padding: 0px 5px 5px 0px; margin-right: 10px;"&gt;
                        &lt;i class='fas fa-users' id="image"&gt;&lt;/i&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/stats-card&gt;
            &lt;/div&gt;
  
            &lt;vue-context ref="menu"&gt;
              &lt;ul style="font-family: 'Source Sans Pro'; font-size: 15px; font-weight: normal; font-style: normal; text-decoration: none; text-align: left; "&gt;
                &lt;li class="context-menu-item" @click="onClick($event.target.innerText)"&gt;&lt;i class='fa fa-file' id="context-menu-icon"&gt;&lt;/i&gt;&lt;span class="context-menu-span"&gt;Preview&lt;/span&gt;&lt;/li&gt;
                &lt;li class="context-menu-item" @click="onClick($event.target.innerText)"&gt;&lt;i class="fa fa-share-alt" id="context-menu-icon"&gt;&lt;/i&gt;&lt;span class="context-menu-span"&gt;Share&lt;/span&gt;&lt;/li&gt;
                &lt;li class="context-menu-item" @click="onClick($event.target.innerText)"&gt;&lt;i class="fa fa-copy" id="context-menu-icon"&gt;&lt;/i&gt;&lt;span class="context-menu-span"&gt;Copy/Move&lt;/span&gt;&lt;/li&gt;
                &lt;li class="context-menu-item" @click="onClick($event.target.innerText)"&gt;&lt;i class='far fa-star' id="context-menu-icon"&gt;&lt;/i&gt;&lt;span class="context-menu-span"&gt;Add to Starred&lt;/span&gt;&lt;/li&gt;
                &lt;li class="context-menu-item" @click="onClick($event.target.innerText)"&gt;&lt;i class='fas fa-cloud-download-alt' id="context-menu-icon"&gt;&lt;/i&gt;&lt;span class="context-menu-span"&gt;Download&lt;/span&gt;&lt;/li&gt;
                &lt;li class="context-menu-item" @click="onClick($event.target.innerText)"&gt;&lt;i class='fas fa-pencil-alt' id="context-menu-icon"&gt;&lt;/i&gt;&lt;span class="context-menu-span"&gt;Rename&lt;/span&gt;&lt;/li&gt;
                &lt;li class="context-menu-item" @click="onClick($event.target.innerText)"&gt;&lt;i class='fas fa-tag' id="context-menu-icon"&gt;&lt;/i&gt;&lt;span class="context-menu-span"&gt;Tags&lt;/span&gt;&lt;/li&gt;
                &lt;li class="context-menu-item" @click="onClick($event.target.innerText)"&gt;&lt;i class="far fa-trash-alt" id="context-menu-icon"&gt;&lt;/i&gt;&lt;span class="context-menu-span"&gt;Delete&lt;/span&gt;&lt;/li&gt;
                &lt;li class="context-menu-item" @click="onClick($event.target.innerText)"&gt;&lt;i class="far fa-chart-bar" id="context-menu-icon"&gt;&lt;/i&gt;&lt;span class="context-menu-span"&gt;Access Stats&lt;/span&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/vue-context&gt;
  
          &lt;/div&gt;
  
          &lt;!-- Folder section begins here --&gt;
          &lt;div v-if="gridView === true" style="width: 280px; height: 30px; margin-left: 15px;"&gt;
            &lt;p style="color: #424242; font-family: 'Source Sans Pro'; font-size: 16px; font-weight: bold; font-style: normal; text-decoration: none; text-align: left;"&gt;Folders&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div v-if="gridView === true" class="row seven-cols" style="padding-right: 15px; padding-left: 15px;"&gt;
            &lt;div class="col-md-1" id="no-padding" v-for="(folder,index) in folders"&gt;
              &lt;stats-card&gt;
                &lt;div slot="header" :data-key="index" class="folder-rectangle" @click="folderSelected=index" :class="{'folder-selected':folderSelected==index}"&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-xl-3" style="padding-right: 15px;padding-left: 15px;"&gt;
                      &lt;div class="clearfix" v-if="folder.shared" style="margin-top: 8px; margin-left: 10px;"&gt;
                        &lt;i class="material-icons" id="folder-image"&gt;&amp;#xe2c9;&lt;/i&gt;
                      &lt;/div&gt;
                      &lt;div class="clearfix" style="margin-top: 8px; margin-left: 10px;" v-else&gt;
                        &lt;i class="material-icons" id="folder-image"&gt;folder&lt;/i&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-xl-9" style="padding-left: 7px;padding-right: 7px;padding-top: 7px;padding-bottom: 7px;"&gt;
                      
                        &lt;div class="file-name-style" style="padding-right: 5px; padding-left: 5px;"&gt;
                          &lt;span&gt;{{folder.name}}&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class="file-size-style" style="padding-bottom: 5px;padding-top: 10px;padding-left: 5px;"&gt;
                          &lt;span&gt;{{folder.numFiles}} files&lt;/span&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                
              &lt;/stats-card&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;!-- Files section begins here --&gt;
          &lt;div v-if="gridView === true" style="width: 280px; height: 30px; margin-left: 15px;"&gt;
            &lt;p style="color: #424242; font-family: 'Source Sans Pro'; font-size: 16px; font-weight: bold; font-style: normal; text-decoration: none; text-align: left;"&gt;Files&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div v-if="gridView === true" class="row" style="padding-bottom: 15px; margin-bottom: 20px; padding-right: 15px; padding-left: 15px;"&gt;
  
            &lt;div class="col-md-5ths col-xs-6"&gt;
              &lt;stats-card&gt;
                &lt;div slot="header" class="header-rectangle"&gt;
                  &lt;img src="https://image.flaticon.com/icons/png/512/136/136526.png" style="height: 50px; margin-top: 50px"&gt;
                &lt;/div&gt;
                &lt;div slot="footer" class="footer-rectangle" style="display: flex;
                  flex-direction: column;
                  justify-content: center;"&gt;
                  &lt;div class="row" &gt;
                    &lt;div class="col-xl-12"  style="display: flex;flex-direction: column;justify-content: center;"&gt;
                      &lt;div class="file-name-style"&gt;
                          &lt;span&gt;File Name&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class="file-size-style" &gt;
                        &lt;span&gt;1 MB&lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/stats-card&gt;
            &lt;/div&gt;
  
            &lt;div class="col-md-5ths col-xs-6"&gt;
              &lt;stats-card&gt;
                &lt;div slot="header" class="header-rectangle"&gt;
                  &lt;i class="far fa-file-image" style=" height: 50px; margin-top: 50px; color:#4CAF50; font-size: 40px;"&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;div slot="footer" class="footer-rectangle" style="display: flex;
                  flex-direction: column;
                  justify-content: center;"&gt;
                  &lt;div class="row" &gt;
                    &lt;div class="col-xl-12"  style="display: flex;flex-direction: column;justify-content: center;"&gt;
                      &lt;div class="file-name-style"&gt;
                          &lt;span&gt;File Name&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class="file-size-style" &gt;
                        &lt;span&gt;1 MB&lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/stats-card&gt;
            &lt;/div&gt;
  
  
            &lt;div class="col-md-5ths col-xs-6"&gt;
              &lt;stats-card&gt;
                &lt;div slot="header" class="header-rectangle"&gt;
                  &lt;img src="http://www.dap.asn.au/wp-content/uploads/2017/01/pdfLogo.png" style=" height: 50px; margin-top: 50px;"&gt;
                &lt;/div&gt;
                &lt;div slot="footer" class="footer-rectangle" style="display: flex;
                  flex-direction: column;
                  justify-content: center;"&gt;
                  &lt;div class="row" &gt;
                    &lt;div class="col-xl-12"  style="display: flex;flex-direction: column;justify-content: center;"&gt;
                      &lt;div class="file-name-style"&gt;
                          &lt;span&gt;File Name&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class="file-size-style" &gt;
                        &lt;span&gt;1 MB&lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/stats-card&gt;
            &lt;/div&gt;
  
            &lt;div class="col-md-5ths col-xs-6"&gt;
              &lt;stats-card&gt;
                &lt;div slot="header" class="header-rectangle"&gt;
                  &lt;img src="https://www.cleverducks.com/wp-content/uploads/2018/01/Excel-Icon.png" style="height: 50px; margin-top: 50px"&gt;
                &lt;/div&gt;
                &lt;div slot="footer" class="footer-rectangle" style="display: flex;
                  flex-direction: column;
                  justify-content: center;"&gt;
                  &lt;div class="row" &gt;
                    &lt;div class="col-xl-12"  style="display: flex;flex-direction: column;justify-content: center;"&gt;
                      &lt;div class="file-name-style"&gt;
                          &lt;span&gt;File Name&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class="file-size-style" &gt;
                        &lt;span&gt;1 MB&lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/stats-card&gt;
            &lt;/div&gt;  
          &lt;/div&gt;
  
          &lt;!-- List View section begins here --&gt;
          &lt;list-view :gridView="gridView" :folders="folders"&gt;
  
          &lt;/list-view&gt;
          
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- File Details section begins here --&gt;
      &lt;div v-if="detailsSectionOpen" id="details" ref="detailsSection"&gt;
        &lt;div class="content"&gt;
          &lt;div class="container-fluid"&gt;
            &lt;ol class="breadcrumb" id="topButtons" style="display: flex;width: 100%;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;"&gt;
              &lt;li class="pull-right"&gt;
                &lt;button class="btn" @click="closeDetailsSection"&gt;
                  &lt;i class="fa fa-close"&gt;
                  &lt;/i&gt;
                &lt;/button&gt;
              &lt;/li&gt;
            &lt;/ol&gt;
  
            &lt;!-- Line break --&gt;
            &lt;hr class="breadcrumb-hr-details"&gt;
          &lt;/div&gt;
  
          &lt;div class="container-fluid"&gt;
            &lt;div style="width: 280px; height: 30px;"&gt;
              &lt;p style="color: #424242;width: 239px;height: 30px;font-family: 'Source Sans Pro'; font-size: 16px; 
                        font-weight: bold; 
                        font-style: normal; 
                        text-decoration: none; 
                        text-align: left;"&gt;Details&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
              &lt;div class="col"&gt;
                &lt;div style="height: 100px; width: 100px; margin: 0 auto" &gt;
                  &lt;i class="fas fa-folder" style="font-size: 100px; color: #878D99"&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;div style="max-width: 100%;"&gt;
                  &lt;ul style="list-style: none;padding-left: 20px;padding-right: 20px; padding-top: 60px;padding-bottom: 60px;" class="details-ul"&gt;
                    &lt;li&gt;Shared with: ~ 15 people&lt;/li&gt;
                    &lt;li&gt;Name: Folder Name&lt;/li&gt;
                    &lt;li&gt;Type: Folder&lt;/li&gt;
                    &lt;li&gt;Files: 20&lt;/li&gt;
                    &lt;li&gt;Location: Home&lt;/li&gt;
                    &lt;li&gt;Owner: John&lt;/li&gt;
                    &lt;li&gt;Created: March 10, 2018&lt;/li&gt;
                    &lt;li&gt;Opened: March 10, 2018, 7 PM by Jenny&lt;/li&gt;
                    &lt;li&gt;Modified: March 10, 2018, by me&lt;/li&gt;
                    &lt;li&gt;Downloaded: March 10, 2018, by John &lt;/li&gt;
                    &lt;li&gt;Retention Policy:  None&lt;/li&gt;
                    &lt;li&gt;Tags: Add&lt;/li&gt;
                    &lt;li&gt;Description: Add&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
                &lt;div style="height: 100px; width: 100px; margin: 0 auto" &gt;
                  &lt;button class="plus-circle-btn"&gt;&lt;i class="fa fa-plus-circle"&gt;&lt;/i&gt;&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am able to see the div being rendered on the DOM when the method showDetails() is called.</p>
  
  <p>But, when I try getting the element by its ID, the result is null. So, <code>document.getElementById('details')</code> returns null.</p>
  
  <p>I think it has something to do with the reactivity in Vue and how v-if works. Can someone please help me resolve this issue?</p>
  
  <p>Thank you!</p>