Datenbindung, um benutzerdefinierte Dropdown-Liste mit Vuejs

Question

Ich erstelle ein benutzerdefiniertes Dropdown-Element, mit folgenden HTML und einigen 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> 

aber wie kann ich den Wert von dem Drop-Down bis zu einem gewissen vue Variable ausgewählt binden?

Ich versuchte <span v-bind="dataVar">Age</span>, aber dataVar ändert sich nicht, wenn Sie den Wert von Dropdown ändern. Ich hatte dataVar wie follwoing

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

definiert Wie kann ich Wert von Drop-Down in dataVar Variable ausgewählt haben?

Arbeiten Drop-Down in jsfiddle, in Go to Foo Ansicht.

Answer 1

ich neu schreiben Sie benutzerdefinierte wählen. Sie benötigen: v-model. Ja, es ist Arbeit nicht nur für Eingaben. See docs

Beispiel Nutzung:

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

Genießen DEMO mit sauberen Quellcode

Answer 2

Änderungen:

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/

gibt es zwei Möglichkeiten für diesen Fall:

1. ich wählen binden Änderung zu verwenden, und die Verwendung vm. $ Set, da Sie die Änderung Griff haben bereits

2. Sie können wählen, Auswahlen innerhalb Vue Management zu machen, das wäre so etwas wie data:()=>{selected:null,options:['one month','11 month']}<div v-for="opt in options" v-on:click="selected=opt">

sein

/* 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 { 
 
    \t selected:null 
 
    }}, 
 
    mounted() { 
 
\t new DropDown($(this.$el.querySelector('#dd')),(val)=>{ 
 
    \t 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')