带有laravel vue js的多个select2不起作用答案

【问题标题】：multimple select2 with laravel vue js not working带有laravel vue js的多个select2不起作用
【发布时间】：2018-10-06 16:22:16
【问题描述】：

我想制作动态表单。所以我尝试了 foreach 循环。没有选择选项一切都很好。为了使类名或 id 名称唯一，我想放置一个索引值但不能放置索引值。看看下面：

                            <div class="form-group m-form__group row "  v-for="(pack,index) in packs">
                                <div class="col-lg-3">
                                    <label>SKU: @{{ index }}</label>
                                    <input v-model="pack.sku" type="text" name="name" class="form-control m-input" placeholder="SKU">
                                </div>
                                <div class="col-lg-3">
                                    <label>Unit:</label>
                                    <select class="form-control select2 @{{ index }}"  name="unit" v-model="pack.unit" >
                                        <option value="0">KG</option>
                                        <option value="1">ML</option>
                                        <option value="2">Liter</option>
                                    </select>
                                </div>
                                <div class="col-lg-3">
                                    <label>Size:</label>
                                    <input v-model="pack.size" type="number" name="name" class="form-control m-input" placeholder="Size">
                                </div>

                                <div class="col-lg-3">
                                    <label>Barcode:</label>
                                    <input v-model="pack.barcode" type="number" name="barcode" class="form-control m-input" placeholder="Barcode">
                                </div>
                            </div>

【问题讨论】：

您提供脚本的代码？

标签： laravel vue.js jquery-select2

【解决方案1】：

您需要重新加载 select2。

html 标记：

<select class="form-control select2 @{{ index }}"  name="unit" v-model="pack.unit" id="unit">
  <option value="0">KG</option>
  <option value="1">ML</option>
  <option value="2">Liter</option>
</select>

Vuejs 代码：

...
components: {

},
mounted() {
  setTimeOut(() => {
    let unit = $('#unit'); // or document.querySelector('#unit');
    unit.select2();
  }, 100);
},

【讨论】：