title: Vue.js 2: Conditional Rendering not working
body: <p>I'm having problems with <a href="https://v2.vuejs.org/v2/guide/index.html#Composing-with-Components" rel="nofollow noreferrer">Conditional Rendering</a>, in that not one single example is working.</p>
  <p>Here's the Vue code:</p>
  <pre><code>Vue.component('sub-folder', {
      props: ['folder'],
      template: '#template-folder-item'
  });
  
  var buildFoldersList = new Vue({
      el: '#sub-folders',
      data: {
          foldersList: this.foldersList,
          foldersStatus: this.foldersStatus
      },
      created () {
          this.buildFolders()
      },
      methods: {
          buildFolders: function () {
              var self = this;
              $.ajax({
                  url: base_url + 'api/folder/get_subfolders/' + browser_folder_id,
                  method: 'POST',
                  data: {
                      &quot;folder_id&quot;: browser_folder_id
                  },
                  success: function (data) {
                      console.log(&quot;Data&quot;); console.log(data.result);
                      self.foldersList = data.result;
                      self.foldersStatus = ( data.result.length &gt; 0 ) ? true : false;
                  },
                  error: function (error) {
                      self.foldersStatus = false;
                      alert(JSON.stringify(error));
                  }
              });
          }
  </code></pre>
  <p>Here are the examples of HTML code that don't work:</p>
  <pre><code>            &lt;div v-if=&quot;foldersStatus == true&quot; class=&quot;list-group&quot; id=&quot;sub-folders&quot;&gt;
                  &lt;sub-folder v-for=&quot;folder in foldersList&quot; :key=&quot;folder.folder_id&quot; v-bind:folder=&quot;folder&quot;&gt;&lt;/sub-folder&gt;
              &lt;/div&gt;
              &lt;div v-else-if=&quot;foldersStatus == false&quot; class=&quot;alert alert-info&quot; role=&quot;alert&quot;&gt;
                  &lt;strong&gt;Hello!&lt;/strong&gt; You don't have any Folders in here!
              &lt;/div&gt;
  </code></pre>
  <p>... and:</p>
  <pre><code>            &lt;div v-if=&quot;foldersStatus == true&quot; class=&quot;list-group&quot; id=&quot;sub-folders&quot;&gt;
                  &lt;sub-folder v-for=&quot;folder in foldersList&quot; :key=&quot;folder.folder_id&quot; v-bind:folder=&quot;folder&quot;&gt;&lt;/sub-folder&gt;
              &lt;/div&gt;
              &lt;div v-if=&quot;foldersStatus == false&quot; class=&quot;alert alert-info&quot; role=&quot;alert&quot;&gt;
                  &lt;strong&gt;Hello!&lt;/strong&gt; You don't have any Folders in here!
              &lt;/div&gt;
  </code></pre>
  <p>... and:</p>
  <pre><code>            &lt;div v-if=&quot;foldersStatus&quot; class=&quot;list-group&quot; id=&quot;sub-folders&quot;&gt;
                  &lt;sub-folder v-for=&quot;folder in foldersList&quot; :key=&quot;folder.folder_id&quot; v-bind:folder=&quot;folder&quot;&gt;&lt;/sub-folder&gt;
              &lt;/div&gt;
              &lt;template v-else&gt;
              &lt;div class=&quot;alert alert-info&quot; role=&quot;alert&quot;&gt;
                  &lt;strong&gt;Hello!&lt;/strong&gt; You don't have any Folders in here!
              &lt;/div&gt;
              &lt;/template&gt;
  </code></pre>
  <p>I've checked, and <code>foldersStatus</code> is correct, so I'm missing something.</p>
  <p><strong>Update</strong></p>
  <p>I've found something strange which makes no sense to me:</p>
  <pre><code>            &lt;div v-if=&quot;1 == 2&quot; class=&quot;list-group&quot; id=&quot;sub-folders&quot;&gt;
                  &lt;sub-folder v-for=&quot;folder in foldersList&quot; :key=&quot;folder.folder_id&quot; v-bind:folder=&quot;folder&quot;&gt;&lt;/sub-folder&gt;
              &lt;/div&gt;
              &lt;div v-if=&quot;1 == 2&quot; class=&quot;alert alert-info&quot; role=&quot;alert&quot;&gt;
                  &lt;strong&gt;Hello!&lt;/strong&gt; You don't have any Folders in here!
              &lt;/div&gt;
  </code></pre>
  <p>Here, the first <code>div</code> is hidden while the second remains visible. So whatever is happening is overthrowing whatever behaviour the code is attempting to produce.</p>