Question

我试图将select2示例扩展为更实用。到目前为止，我已经添加了多选功能，并尝试允许自定义select2配置。

看来道具对象的功能属性在移交给组件时被剥离。

父母为js函数提供widget组件配置的解决方案是什么？

我有点困惑，因为嵌入式版本实际上显示params在内置控制台输出中正确传输，而jsfiddle浏览器控制台输出则没有。 但是，两个版本都没有将功能传递给select2小部件。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我看到你在控制台日志中打印的js函数。我已更新您的fiddle并将以下日志放入select2 compoent：

console.log(params.formatResult);
console.log(params.formatSelection);

以下打印：

function (item) {return item.label;}
function (item) {return item.label;}

Vue.js：在props对象中传递匿名函数

1 个答案: