VueJS Select2指令不會觸發@change事件

如標題所示，我使用來自其頁面的示例爲VueJS 1.0.15註冊了Select2指令。我想捕獲@change事件，但它不起作用。VueJS Select2指令不會觸發@change事件

HTML：

<select v-select="item.service" :selected="item.service" @change="serviceChange(item)"> 
    <option value="1">test 1</option> 
    <option value="2">test 2</option> 
</select>

JS：

Vue.directive('select', { 
    twoWay: true, 
    params: ['selected'], 
    bind: function() { 
     var self = this 
     $(this.el) 
      .select2({ 
       minimumResultsForSearch: Infinity 
      }) 
      .val(this.params.selected) 
      .on('change', function() { 
       console.log('changed'); 
       self.set(this.value); 
      }) 
    }, 
    update: function (value) { 
     $(this.el).val(value).trigger('change') 
    }, 
    unbind: function() { 
     $(this.el).off().select2('destroy') 
    } 
}); 

var Checkout = new Vue({ 
     el: '.Checkout', 
     methods: { 
     serviceChange: function (item) { 
      console.log(item); 
     }, 
    } 
});

來源

2016-01-22 iGidas

如果您爲它設置了jsfiddle，可能會更容易幫助您進行調試。 –

-1

你不應該使用$發出？

update: function (value) { 
    $(this.el).val(value); 
    this.$emit('change'); 
}

來源

2016-02-12 15:14:53

這似乎不起作用。我不認爲$ emit在指令的上下文中可用。 –

你基本上很髒，用手錶 –

檢查你是對的，$ emit在指令上下文 –

是的，我遇到了這個問題。還沒有想出的解決辦法，但這個是我目前使用的工作-A輪watch：

在你VueJS：

watch: { 

    /** 
    * Watch changes on the select2 input 
    * 
    * @param integer personId 
    */ 
    'person': function (personId) { 
     var personName = $("#person").select2('data')[0].text 
     this.doSomethingWithPerson(personId, personName) 
    } 
},

然後在你的HTML：

<select 
     id="person" 
     v-select2="person" 
     class="form-control" 
     data-options="{{ $peopleJSON }}" 
     data-placeholder="Choose a person" 
> 
</select>

注意：在上面的HTML中，{{ $peopleJSON }}就是我如何使用Blade模板引擎插入我的服務器端JSON。這個問題並不真正。

來源

2016-02-17 17:10:07 prograhammer

最近，我試圖綁定一個選擇2導致的vuejs數據模型對象的一個問題，我想出了一個解決方案，它可以幫助你：

https://jsfiddle.net/alberto1el/7rpko644/

var search = $(".search").select2({ 
    ajax: { 
    url: "/echo/json", 
    dataType: 'json', 
    delay: 250, 
    data: function (params) { 
     return { 
     q: params.term 
     }; 
    }, 
    processResults: function (data, params) { 
     var mockResults = [{id: 1,text: "Option 1"}, {id: 2,text: "Option 2"}, {id: 3,text: "Option 3"}]; 
     return {results: mockResults}; 
    }, 
    cache: true 
    }, 
    escapeMarkup: function (markup) { return markup; }, 
    minimumInputLength: 1 
}); 

search.on("select2:select", function (e){ 
    $('.result_search').val($(this).val()).trigger('change'); 
}); 

var vm = new Vue({ 
    el: "#app", 
    data: { 
    busqueda_result : '' 
    } 
});

我知道你正在使用指令，但也許它可以幫助你

來源

2016-03-23 16:04:58

擴大對阿爾貝託加西亞的答案。

var selectDropDown = $(".select-drop-down").select2(); 

selectDropDown.on('select2:select', function (e) { 
    var event = new Event('change'); 
    e.target.dispatchEvent(event); 
});

來源

2016-09-15 21:28:46 suxur

中不存在。謝謝 –

VueJS Select2指令不會觸發@change事件

回答

相關問題