data binding to custom dropdown with Vuejs
<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>