title: Why isn't Vue rendering this space? A bug?
body: <p>I have two vue properties <code>firstName</code> and <code>lastName</code>.   Let's say the value of these properties are Tim and Smith.  When I display them as a complete name, I display these properties and include a space between them if they both contain values.  However, Vue omits the space in the output and displays TimSmith.  But if I change to code to output a comma space if both properties have values then it properly ouputs Tim, Smith.  Feels like a bug.  Can anyone explain how to achieve my goal with Vue of only including a space between the two properties if they both contain values and explain why I'm seeing what I am?</p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="appTemplate"&gt;
              {{firstName}}&lt;template v-if="firstName!='' &amp;&amp; lastName!=''"&gt; &lt;/template&gt;{{lastName}}&lt;br /&gt;
              {{firstName}}&lt;span v-if="firstName!='' &amp;&amp; lastName!=''"&gt; &lt;/span&gt;{{lastName}}&lt;br /&gt;
              {{firstName}}&lt;template v-if="firstName!='' &amp;&amp; lastName!=''"&gt;, &lt;/template&gt;{{lastName}}&lt;br /&gt;
              {{firstName}} {{lastName}}&lt;br /&gt;
          &lt;/div&gt;
  
          &lt;script src="https://unpkg.com/vue@2.2.5/dist/vue.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              var app = new Vue({
                  el: '#appTemplate',
                  data: {
                      firstName: "Tim",
                      lastName: "Smith"
                  }
              });
          &lt;/script&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>The above code produces the output below. Why isn't there a space between Tim and Smith in the first two lines?</p>
  
  <p><a href="https://i.stack.imgur.com/ioWGk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ioWGk.png" alt="enter image description here"></a>  </p>