加载选项时选择 2 Wrapped 组件重复

Question

我在 laravel 中创建了一个包装好的 vue 组件来包装 jQuery select2 元素。 基于in this code。

当 select.options 中的值发生变化时，选择元素会被复制。就像下图一样。

该选择仅在第二次选择中有效。

不知道是什么问题，我在自己做的代码下面加上options变量的内容。

select2.vue

<template>
    <div>
        <select>
            <slot></slot>
        </select>
    </div>

</template>
<script>
    export default {
        name: "select2",
        props: ['options', 'value'],
        mounted: function () {
            let vm = this
            $(this.$el)
                // init select2
                .select2({ data: this.options })
                .val(this.value)
                .trigger('change')
                // emit event on change.
                .on('change', function () {
                    vm.$emit('input', this.value)
                })
        },
        watch: {
            value: function (value) {
                // update value
                $(this.$el)
                    .val(value)
                    .trigger('change')
            },
            options: function (options) {
                // update options
                $(this.$el).empty().select2({ data: options })
            }
        },
        destroyed: function () {
            $(this.$el).off().select2('destroy')
        }

    }
</script>

<style scoped>

</style>

blade文件调用

<select2 :options="select.options" v-model="select.value"></select2>

select.options数据

          [
                {
                    "text": "Group 1",
                    "children": [
                        {
                            "id": 1,
                            "text": "Element 1"
                        },
                        {
                            "id": 2,
                            "text": "Element 2"
                        }
                    ]
                },
                {
                    "text": "Group 2",
                    "children": [
                        {
                            "id": 3,
                            "text": "Element 3"
                        },
                        {
                            "id": 4,
                            "text": "Element 4"
                        }
                    ]
                }
            ]

Answer 1

我尝试了一段时间重现您遇到的问题，但没有成功。

我注意到几件事可能对您有所帮助：

this.$el 在您的示例中指的是div，而examples 我见过使用select。

尽量避免对属性和变量使用相同的名称，因为这会让人混淆options: function (options) {

我在下面添加了一个 sn-p，以防万一。

Vue.config.productionTip = false;
Vue.config.devtools = false;

Vue.component("select2", {
  template: "<select style='width: 100%'></select>",
  props: ['options', 'value'],
  mounted: function() {
    let vm = this
    $(this.$el)
      .select2({
        data: this.options
      })
      .val(this.value)
      .trigger('change')
      .on('change', function() {
        vm.$emit('input', this.value)
      })
  },
  watch: {
    value: function(value) {
      $(this.$el)
        .val(value)
        .trigger('change')
    },
    options: function(val) {
      $(this.$el).empty().select2({
        data: val
      })
    }
  },
  destroyed: function() {
    $(this.$el).off().select2('destroy')
  }
});


new Vue({
  el: "#app",
  data: () => {
    return {
      selected: null,
      options: [{
          "text": "Group 1",
          "children": [{
              "id": 1,
              "text": "Element 1"
            },
            {
              "id": 2,
              "text": "Element 2"
            }
          ]
        },
        {
          "text": "Group 2",
          "children": [{
              "id": 3,
              "text": "Element 3"
            },
            {
              "id": 4,
              "text": "Element 4"
            }
          ]
        }
      ]
    }
  },
  methods: {
  modifyOptions() {
  this.options = [{
          "text": "Group 1",
          "children": [{
              "id": 4,
              "text": "Element 1"
            },
            {
              "id": 6,
              "text": "Element 2"
            }
          ]
        }];
  }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
    <select2 :options="options" v-model="selected"></select2>
    <div>
    Selected: {{selected}}
    </div>
    <button type="button" @click="modifyOptions">Modify Options</button>
  </div>
</div>