множественный select2 с laravel vue js не работает - PullRequest
Новая
       6

множественный select2 с laravel vue js не работает

0 голосов
/ 06 октября 2018

Я хочу создать динамическую форму. Так что для этого я попытался цикл foreach. Все идет хорошо без выбора параметров.Чтобы сделать имя класса или имя уникальным, я хочу разместить индексное значение, но не могу разместить индексное значение. Смотрите ниже: 

                            <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>

1 Ответ

0 голосов
/ 06 октября 2018

вам нужно перезагрузить 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);
},
...