Vue.js 无法获取 jQuery select2 的值

Posted 2023-02-22

【中文标题】Vue.js 无法获取 jQuery select2 的值

【英文标题】：Vue.js unable to get the value of jQuery select2

【发布时间】：2020-08-27 02:45:02

【问题描述】：

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

【参考方案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>

【讨论】：

如果我想在更改选项时执行 ajax 操作，因为 vue 无法检测到它，我想再请求一个帮助，我该怎么做才能调用 vue 中的函数。？

@AbidusSattarAziz I've updated my answer with a method onSelectChange that gets called when the select value changes.

【参考方案2】：

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

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

【讨论】：

我已经尝试过这个.. 工作正常，但如果我使用任何其他 html 的组件外，它们不会出现