Vue.js无法获取jQuery select2的值。

Question

我在这里遇到了一个问题.正在使用vue.js作为cdn.com。所以我不像我可以安装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，也试过在mounted中调用它，但没有任何效果。

Answer 1

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

如果你想继续走这条路，而且你是用ajax提交表单，你可以在提交表单的时候得到这个值。

关于你的Vue, 数据必须是一个函数 和 mounted 不属于 data.

EDIT:

看了一下 密码笔 对于 Select2 - 包装器组件示例 在 @Julia 提供的代码中，有一个变化事件，你可以用 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/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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，做自己的事情，如果你检查代码，你会注意到它。这就是为什么你不能监听select上的事件。

在官方文档中，有一个jQuery插件和VueJS混合的例子。Select2 - 包装器组件示例