Javascript 使用Vuejs将数据绑定到自定义下拉列表

我正在使用以下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>

如何在

dataVar

变量中选择下拉列表的值

工作下拉列表，在

中转到Foo

视图。

修改：

1.

函数下拉列表（el，onChange）{this.onChange=onChange

2.

obj.opts.on（'click'，function（）{…obj.onChange（obj.val）

3.

这是foo我的值是{{selected}\

这种情况有两种方法：

我选择使用bindchange和vm.$set，因为您已经有了变更句柄

您可以选择在Vue管理中进行选择，这类似于

数据：（）=>{selected:null，选项：['one month'，'11 month']}

/*全局$：true*/
功能下拉列表（el、onChange）{
这是1.dd=el
this.placeholder=this.dd.children（'span'））
this.opts=this.dd.find（'ul.dropdown>li'）
this.val=“”
this.index=-1
this.initEvents（）
this.onChange=onChange
}
DropDown.prototype={
initEvents:function（）{
var obj=此
obj.dd.on（'点击'，功能（事件）{
$（this.toggleClass（'active'））
返回错误
})
obj.opts.on（'click'，函数（）{
var opt=$（此）
obj.val=opt.text（）
obj.index=opt.index（）
obj.placeholder.text（obj.val）
obj.onChange（obj.val）
})
},
getValue:函数（）{
把这个还给我
},
getIndex:function（）{
返回此.index
}
}
//定义一些组件
常数Foo={
模板：'\
\
年龄\
\
\
\
\
\
\
\
我是福\
\
\
我是福\
我的值是{selected}\
\
\
',
数据：函数（）{return{
所选：空
}},
挂载（）{
新的下拉列表（$（this.$el.querySelector（'#dd'）），（val）=>{
this.selected=val
})    
}
};
常数条={
模板：“这是酒吧！
”，
数据：函数（）{return{
}}
};
//创建一个路由器实例。
//您可以在此处传入其他选项，但让我们
//现在要保持简单。
常量路由器=新的VueRouter({
模式：“历史”，
滚动行为：（到、从、保存位置）=>{
if（to.hash）{
返回{selector:to.hash}
}否则{
返回{x:0，y:0}
}
},
路线：[
{路径：'/foo'，组件：foo}，
{路径：'/bar'，组件：bar}，
]
})
const app=新的Vue({
路由器
}).$mount（“#app”）

我重写了您的自定义选择。 您需要使用：

v-model

。是的，它不仅适用于输入

用法示例：

 <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>

Selected:{{Selected.name}
带标签，用于简单值，如数字

---

享受干净的源代码

为什么不创建一个Vue组件？@GerardReches这似乎很有希望，但我如何绑定一个变量，因为HTML中的值正在被javascript更改。你能补充一下你想要实现什么吗？我不明白你将这段代码绑定到Vue变量是什么意思。你能理解吗st为此使用一种方法？更新的小提琴：我想控制父组件下拉列表的打开，如何使用这种方法，我应该将

打开
作为
道具
还是将另一个
道具
传递给观察者并让观察者查看它？是的，将“打开”作为道具，并带有“默认：false”。
 <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>