Conditional templates with v-if

We need one last thing before testing our change; the main and preview panes shouldn't be displayed if no note is selected--it would not make sense for the user to have an empty editor and preview pane pointing to nothing, and it would make our code crash since selectedNote would be null. Thankfully, the v-if directive can dynamically take parts out of the template when we want. It works just like the JavaScript if keyword, with a condition.

In this example, the p element will not be in the DOM at all while the loading property is falsy:

<p v-if="loading">
  Loading...
</p>

There are also two other useful directives, v-else and v-else-if, that will work as you might have expected:

<p v-if="loading">
  Loading...
</p>

<p v-else-if="processing">
  Processing
</p>

<p v-else>
  Content here
</p>

Back in our app, add the v-if="selectedNote" condition to both the main and preview panes so that they are not added to the DOM until a note is selected:

<!-- Main pane -->
<section class="main" v-if="selectedNote">
  ...
</section>

<!-- Preview pane -->
<aside class="preview" v-if="selectedNote" v-html="notePreview">
</aside>

The repetition here is a bit unfortunate, but Vue has us covered. You can surround both elements with a special <template> tag that acts like braces in JavaScript:

<template v-if="selectedNote">
  <!-- Main pane -->
  <section class="main">
    ...
  </section>

  <!-- Preview pane -->
  <aside class="preview" v-html="notePreview">
  </aside>
</template>

At this point, the app should look like this:

The <template> tag will not be present in the DOM; it is more like a ghost element that is useful to regroup real elements together.