时间戳

首页 > 解决方案 > Vue.js 无法获取 jQuery select2 的值

jquery - Vue.js 无法获取 jQuery select2 的值

问题描述

我来这里有个问题。我使用 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 中调用它，但没有任何效果。请帮助我-我被困住了

标签： jqueryvue.jsjquery-select2

解决方案

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

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

关于你的 Vue，数据必须是一个函数，mounted而不是data.

编辑：

在查看@Julia提供的Select2 - Wrapper 组件示例的代码笔之后，您可以使用 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>

推荐阅读