Question

我想制作动态表格。因此，我尝试了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>

Answer 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);
},

Laravel Vue JS的multimple select2不起作用

1 个答案: