首页 > 解决方案 > 当我动态添加选择框时,如何使 select2 在 vue js 中可用?

问题描述

<tr v-for="(tr, k) in trs">
    <td>
        <select v-model="tr.product_reference" id="products" class="form-control form-control-sm product_select2" style="width: 100%" required @change="get_imeis(k, tr.product_reference)">
            <option value="" selected>Select product...</option>
            <option v-for="(val, index) in products" :value="val.product_reference"> @{{val.product_name}} </option>
        </select>
    </td>
    <td>
        <select v-model="tr.imei" id="imei" class="form-control form-control-sm imei_select2" style="width: 100%" required>
            <option value="" selected>Select IMEI...</option>
            <option v-for="(val, index) in tr.imeis" :key="index" :value="val.imei"> @{{val.imei}} </option>
        </select>
    </td>

</tr>

//VUE JS 
 mounted: function() {
      
         $(".product_select2").select2().on('change', function() {
             console.log(this)
             app.trs.product_reference = $(this).val();
         });
         $(".imei_select_2").select2().on('change', function() {
             app.trs.imei = $(this).val();
         });
    },

第一行正在工作,但是当我创建新行时,select2()它不起作用。我select2()在页面加载时声明已安装。select2()即使添加了新行,我如何才能启用。谢谢。

标签: vue.jsjquery-select2

解决方案


推荐阅读