data binding to custom dropdown with Vuejs

Question

I am creating a custom dropdown element, with following HTML and some 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>

But How do I bind the value selected by the dropdown to some vue variable?

I tried Age, but dataVar does not changes when you change value of dropdown. I had defined dataVar like follwoing

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

How do I have selected value of dropdown in dataVar variable?

Working drop down in jsfiddle, in Go to Foo view.

@GerardReches that seems promising, but still how will I bind a variable as value in HTML is being changed by javascript. — Saurabh
– Saurabh, Commented Dec 13, 2016 at 11:30
Can you please add to the question what you want to achieve? I'm not understanding what do you mean with bind this piece of code to a vue variable. — Gerard Reches
– Gerard Reches, Commented Dec 13, 2016 at 11:33
Can't you just use a method for that? updated Fiddle: jsfiddle.net/0xzkv7ko — craig_h
– craig_h, Commented Dec 13, 2016 at 11:43

tony19 · Accepted Answer · 2022-07-15 21:32:42Z

3

I rewrite you custom select. You need use: v-model. Yes it's work not only for inputs. See docs

Example usage:

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

Enjoy DEMO with clean source code

edited Jul 15, 2022 at 21:32

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 13, 2016 at 12:51

Alex Shtorov

2361 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Saurabh Over a year ago

I want to control opening of dropdown from parent component, How can I do this with this approach, should I make opened as props or pass another prop and have watcher over it?

Alex Shtorov Over a year ago

Yes, make "opened" as prop with "default: false".

Partab Saifuddin Zakir Over a year ago

stackoverflow.com/questions/53090515/…

Josh Lin · Accepted Answer · 2016-12-13 12:23:14Z

modifications:

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

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

3. this is foo my value is {{selected}} \

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

there are two ways for this case:

I choose to use bind change and use vm.$set, since you have the change handle already
you can choose to make selections inside Vue management, that would be something like 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')

Collectives™ on Stack Overflow

data binding to custom dropdown with Vuejs

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related