javascript - 使用 Vuejs 将数据绑定(bind)到自定义下拉列表

Question

我正在创建一个自定义下拉元素，其中包含以下 HTML 和一些 CSS:

<div id="dd" class="col-md-4 col-lg-4 wrapper-dropdown-3 left-divider" tabindex="1">
    <span>Age</span>
    <ul class="dropdown">\
      <li><a href="#"><i class="icon-envelope icon-large"></i>1 Month Old</a></li>
      <li><a href="#"><i class="icon-truck icon-large"></i>11 Month Old</a></li>
    </ul>
</div>

但是如何将下拉列表选择的值绑定(bind)到某个 vue 变量？

我试过<span v-bind="dataVar">Age</span> ，但是dataVar当您更改下拉列表的值时不会更改。我定义了 dataVar像下面这样

data: function() { 
  return { 
    dataVar: ''
  }
},

如何在 dataVar 中选择下拉列表的值变量？

工作下拉列表jsfiddle ，在 Go to Foo查看。

Answer 1

我重写了你的自定义选择。您需要使用:v-model。是的，它不仅适用于输入。 See docs

使用示例:

 <h3>Selected: {{ selected.name }}</h3>

 <custom-select :options="options"
                value-key="id" 
                label-key="name"
                v-model="selected"></custom-select>
             
             
 <div style="margin-top: 40px">
     <h3>Wihtout labels, for simple values, like numbers</h3>
  
     <custom-select :options="options"
                    v-model="selected"></custom-select>
 </div>

享受DEMO具有干净的源代码