數據與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像follwoing

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. 我選擇使用綁定的變化和使用虛擬機。$一套，因爲你必須改變手柄已經

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 { 
 
    \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')