title: data binding to custom dropdown with Vuejs
body: <p>I am creating a custom dropdown element, with following HTML and some CSS:</p>
  
  <pre><code>&lt;div id="dd" class="col-md-4 col-lg-4 wrapper-dropdown-3 left-divider" tabindex="1"&gt;
      &lt;span&gt;Age&lt;/span&gt;
      &lt;ul class="dropdown"&gt;\
        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-envelope icon-large"&gt;&lt;/i&gt;1 Month Old&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-truck icon-large"&gt;&lt;/i&gt;11 Month Old&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But How do I bind the value selected by the dropdown to some vue variable?</p>
  
  <p>I tried <code>&lt;span v-bind="dataVar"&gt;Age&lt;/span&gt;</code>, but <code>dataVar</code> does not changes when you change value of dropdown. I had defined <code>dataVar</code> like follwoing</p>
  
  <pre><code>data: function() { 
    return { 
      dataVar: ''
    }
  },
  </code></pre>
  
  <p>How do I have selected value of dropdown in <code>dataVar</code> variable?</p>
  
  <p>Working drop down in <a href="https://jsfiddle.net/mimani/28gjwvut/3/" rel="nofollow noreferrer">jsfiddle</a>, in <code>Go to Foo</code> view.</p>