title: Vue - Bind data conditionally according to property
body: <p>I have a component that contains a child component which have some property that we can bind to. like:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;Child :bar="foo"&gt;&lt;/Child&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    name: 'Parent',
    props: ['foo'],
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Now I want to bind the property 'bar' of the Child component conditionally. For example, I want to bind the property 'bar' of the child component only when the 'foo' property from the parent component is not <code>undefined</code>, how can I do that?</p>
  
  <hr>
  
  <p>Update for the guys that advise me to use <code>v-if</code> directive:</p>
  
  <p>Using <code>v-if</code> directive <em>ISN'T</em> an ideal solution, I think. When the conditions get complicated and the number of conditional binding properties get larger (like 5), the cases will grow exponentially and lead to a <em>VERY LONG</em> <code>if-elseif-else</code> chain. It's ugly, so NO.</p>
  
  <p>I'm wondering if there is a REACT-LIKE way to solve this problem - just working with <code>vdom</code> and do binding pragmatically. but I don't know if I can do this in the render function, because I don't discover any API function that can do the same thing as <code>v-bind</code> directive on a child component.</p>