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

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>

但是如何将下拉列表选择的值绑定到某个 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

Answer 2

修改：

1.function DropDown (el,onChange) { this.onChange = onChange

2.obj.opts.on('click', function () { .... obj.onChange(obj.val)

3.<span> this is foo </span> <span> my value is {{selected}} </span>\

https://jsfiddle.net/postor/z79b0ksk/2/

这种情况有两种方法：

1. 我选择使用绑定更改并使用 vm.$set，因为您已经拥有更改句柄

2. 您可以选择在 Vue 管理中进行选择，例如 data:()=>{selected:null,options:['one month','11 month']} <div v-for="opt in options" v-on:click="selected=opt">

/* global $:true */
function DropDown (el,onChange) {
  this.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 = this

    obj.dd.on('click', function (event) {
      $(this).toggleClass('active')
      return false
    })

    obj.opts.on('click', function () {
      var opt = $(this)
      obj.val = opt.text()
      obj.index = opt.index()
      obj.placeholder.text(obj.val)
      obj.onChange(obj.val)
    })
  },
  getValue: function () {
    return this.val
  },
  getIndex: function () {
    return this.index
  }
}


// Define some components
const Foo = {
  template: '<div>\
        <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>\
  <div class="card row" >\
  <div class="col-xs-5" style="height: 100px; background-color: red; position: fixed;">\
  <span> this is foo </span>\
    </div>\
      <div class="col-xs-7" style="height: 100px; background-color: Yellow">\
  <span> this is foo </span>\
  <span> my value is {{selected}} </span>\
    </div>\
  </div>\
</div>',
  data: function() { return {  
  	selected:null
  }},
  mounted () {
	 new DropDown($(this.$el.querySelector('#dd')),(val)=>{
   	this.selected = val
   })    
  }
};

const  Bar = {
  template: '<p>This is bar!</p>',
  data: function() { return {  
  }}
};


// Create a router instance.
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  mode: 'history',
    scrollBehavior: (to, from, savedPosition) => {
    if (to.hash) {
      return {selector: to.hash}
    } else {
      return {x: 0, y: 0}
    }
    },
    routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar },
  ]
})

const app = new Vue({
  router
}).$mount('#app')