Question

正如标题所说，我使用他们页面中的示例为VueJS 1.0.15注册了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);
      },
    }
});

Answer 1

扩大了Alberto Garcia的回答。

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="text"/>
<xsl:param name="del" select="','"/>
<xsl:param name="col1" select="'time'"/>
<xsl:param name="col2" select="'bytes'"/>
<xsl:param name="col3" select="'input'"/>
<xsl:param name="col4" select="'output'"/>
<xsl:param name="col5" select="'timestamp'"/>
<xsl:template match="/status/snapshot">
    <xsl:value-of select="concat($col1, $del, $col2, $del, $col3, $del, $col4, $del, $col5, '&#10;')"/>
    <xsl:for-each select="metrics">
        <xsl:variable name="pos" select="position()"/>
        <xsl:value-of select="concat(entry[key = $col1]/value, $del)"/>
        <xsl:value-of select="concat(entry[key = $col2]/value, $del)"/>
        <xsl:value-of select="concat(entry[key = $col3]/value, $del)"/>
        <xsl:value-of select="concat(entry[key = $col4]/value, $del)"/>
        <xsl:value-of select="concat(../timestamp[$pos], '&#10;')"/>
    </xsl:for-each>
</xsl:template>

Answer 2

是的，我遇到了这个问题。 Haven尚未找到解决方案，但这是我目前使用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的方式。与这个问题不太相关。

Answer 3

我最近在尝试将select2结果绑定到vuejs数据模型对象时出现问题，而且我提供了一种解决方法，它可能对您有所帮助：

seq2seq_model.py

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 : ''
  }
});

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

Answer 4

你不应该使用$ emit？

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

VueJS Select2指令不会触发@change事件

4 个答案: