0
Я пытаюсь расширить пример select2, чтобы быть более практичным. До сих пор я добавил многофункциональные функции и пытался настроить пользовательскую настройку select2.Vue.js: Передача анонимных функций в объекте реквизита
https://jsfiddle.net/5ytm3LL6/
Представляется, что функциональные свойства реквизита объектов раздевание, когда передан компонента.
Что такое решение для родителя, чтобы настроить компонент виджета с помощью js-функций?
Я немного смущен, потому что встроенная версия на самом деле показывает параметры, которые правильно передаются во встроенный вывод консоли, а jsfiddle - вывод консоли браузера. Однако обе версии не передают функции select2 widget.
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>