Vue.js 无法获取 jQuery select2 的值

Question

我来这里是有问题的。我使用 vue.js 作为 CDN。所以不像我可以安装 npm 和使用包。

当我尝试使用 jQuery 的 select2 插件时，问题就开始了。它正确显示了动态出现的选项值，但是当我选择一个值时会出现问题，vue.js 实际上并没有得到它。只是为了通知您它可以完美运行，如果我不使用 select2 类，vue 确实会获得价值。

这是我的选择选项部分代码

<select v-model="formData.allowance_id" id="allowance_id"
        name="allowance_id" class="form-control select2" required>
     <option :key="'allowance_id'" value="">choose allowance</option>
     <option v-for="(allowance, index) in allowances" :key="'allowance_id' + index" :value="allowance.id">
     @{{ allowance.name }}
     </option>
</select>

这是我的 vue 部分

new Vue({
        el: '#app',
        data: {
            allowances: '',
            formData: {
                allowance_id: ''
            },
    mounted: function () {
           this.getallowances()
    }
})

这里是 jQuery 的部分

<script type="text/javascript">
     $(document).ready(function () {
     $.('.select2').select2();
})
</script>

我尝试在 vue.js 之前/之后加载 select2，也尝试在 mount 中调用它，但没有任何效果。请帮帮我 - 我卡住了

Answer 1

我不鼓励混合使用 jQuery 和 Vue。例如在下面使用您提到的jQuery select2 插件的sn-p 中，一旦您执行$('.select2').select2()，那么v-model="formData.allowance_id" 就没有用了，因为select2 自己做事。

如果您想继续这条路线并且您正在使用 ajax 提交表单，您可以在提交表单时获得该值。

关于您的 Vue，data must be a function 和 mounted 不是 data 的一部分。

编辑：

在查看@Julia 提供的Select2 - Wrapper component example 的codepen 之后，您可以使用select2 订阅一个更改事件，您可以使用它来更新您的模型，如下所示：.on("change", function() { self.onSelectChange(this.value); });

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

new Vue({
  el: '#app',
  data: () => {
    return {
      allowances: [],
      formData: {
        allowance_id: null
      }
    };
  },
  mounted() {
    this.getallowances();
    
    let self = this;
    $('.select2').select2().on("change", function() {
      self.onSelectChange(this.value);
    });
  },
  methods: {
    onSelectChange(val) {
      this.formData.allowance_id = val;
    },
    onSubmit() {
      this.formData.allowance_id = $($(".select2")[0]).val();
    },
    getallowances() {
      this.allowances = [{
        id: 1,
        name: "Test"
      }];
    }

  }
});

<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">
  <select v-model="formData.allowance_id" id="allowance_id" name="allowance_id" class="form-control select2" required @input="alert('Test')">
    <option :key="'allowance_id'" value="">choose allowance</option>
    <option v-for="(allowance, index) in allowances" :key="allowance.id" :value="allowance.id">
      @{{ allowance.name }}
    </option>
  </select>

  <div>
    <strong>Selected: </strong> {{formData.allowance_id}}
  </div>

  <div>
    <button type="button" @click="onSubmit">Submit</button>
  </div>
</div>

Answer 2

select2 隐藏选择并做自己的事情，如果您检查代码，您会注意到它。这就是为什么您无法在 select 上收听事件的原因。

官方文档Select2 - Wrapper component example中有一个混合jQuery插件和VueJS的例子