0
我試圖擴展select2的例子，使其更實用。到目前爲止，我已經添加了多選功能，並嘗試允許自定義select2配置。Vue.js：在道具對象中傳遞匿名函數
https://jsfiddle.net/5ytm3LL6/
似乎道具對象的該功能的屬性時遞給部件被剝離。
什麼是家長給js函數提供構件配置的解決方案？
我有點困惑，因爲嵌入式版本實際上顯示params在內置控制檯輸出中正確傳輸，而jsfiddle瀏覽器控制檯輸出沒有。 但是，兩個版本都不會將函數傳遞給select2小部件。
Vue.component('select2', {
props: ['options', 'value', 'params'],
template: '<select><slot></slot></select>',
mounted: function() {
var vm = this, params = $.extend({}, this.params || {});
console.log(this.params, params);
params.data = this.options;
$(this.$el).val(this.value).select2(params).on('change', function() {
vm.$emit('input', $(vm.$el).val());
});
},
watch: {
value: function (value) {
var $el = $(this.$el);
if (!_.isEqual($el.val(), value)) {
$el.select2('val', value);
}
},
options: function (options) {
$(this.$el).select2({ data: options });
}
},
destroyed: function() { $(this.$el).off().select2('destroy'); }
});
new Vue({
el:'#app',
data: function() {
return {
value: 'a',
options: [{id:'a', label:'A'}, {id:'b', label:'B'}],
params: {
test: 'TEST',
formatSelection: function (item) {return item.label;},
formatResult: function (item) {return item.label;}
}
};
}
});<link rel="stylesheet" type="text/css" href="https://unpkg.com/select2/dist/css/select2.css"></style>
<script src="https://unpkg.com/lodash"></script>
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/select2"></script>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<select2 v-model="value" :options="options" :params="params"></select2>
</div>