title: Vue.js: Don't render attributes if value is empty (e.g.: to="" or type="")
body: <p>I have Button component which renders a nuxt-link or a button depending if you provide some attribute like <code>to</code> or <code>type</code>.</p>
  
  <pre><code>&lt;div class="Btn"&gt;
    &lt;component
      :class="['Btn__button', createAppearanceClasses]"
      v-on:click="click"
      :disabled="disabled"
      :is="type"
      :to="to"
      :href="external ? to : false"
      :target="target"
      :type="buttonType"
      &gt;
      &lt;slot /&gt;
    &lt;/component&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(Whereas the <code>type</code> is a computed property to return a <code>nuxt-link</code> for internal links, a <code>a</code> tag if it is an external link or a <code>button</code> if these properties are not defined) </p>
  
  <p>Now we sometimes render some Buttons which open a Modal or submit. There we don't pass any type or to attribute:</p>
  
  <pre><code>&lt;Btn :class="'FlexContent__button'" 
    :appearance="['rounded-corners']"
    v-on:click.native="openOverlay" 
  &gt;    
   {{ component.text }}
  &lt;/Btn&gt;
  </code></pre>
  
  <p>In the rendered HTML I get:</p>
  
  <p><code>&lt;button disabled to="" target="" type="" class="Btn__button Btn__button--rounded-corners"&gt;</code></p>
  
  <p>If I validate this I get errors concerning these empty attributes:
  <code>Attribute to not allowed on element button at this point.</code></p>
  
  <p>How can I render the attribute <code>to=""</code> only if I have an actual value passed to the Btn component?</p>
  
  <p>I was thinking about something like this, but this does not work:
      <code>(to ? ':to="to"' : '')</code>
  So I need some other solution for this.</p>
  
  <p>Thanks in advance for hints.</p>
  
  <p>cheers</p>