Bootstrap - выберите не работать с динамически заполненными параметрами в Vuejs

Question

Я пытаюсь использовать bootstrap -выбрать в одном из моих проектов, сначала уже созданный вариант выбора, он работает нормально, но когда параметры выбора создаются динамически, плагин не работает, и он также не отображает никаких ошибок , Я включил эти $("#supplier_id").selectpicker("render");$("#supplier_id").selectpicker("refresh");, как предложено в различных ответах, таких как Bootstrap - выбор не работает с динамически заполненными параметрами и jquery bootstrap selectpicker обновляет списки на основе предыдущего выбора списка и так далее, но все же я не могу добиться того, чего хочу.

Код HTML в файле Vue, как показано ниже

 

 <form novalidate @submit.prevent="getData">
     <div class="form-horizontal" v-for="(row, index) in $v.rows.$each.$iter" :key="index">
            <div class="form-group">
              <div class="col-md-3">
                <select
                  name="supplier_id1"
                  id="supplier_id"
                  class="form-control test"
                  v-model="row.supplier_id1.$model"
                  data-live-search="true"
                >
                  <option value selected>د پلورونکي ټاکنه</option>
                  <option
                    v-for="Supplier in Suppliers"
                    :key="Supplier.id"
                    :value="Supplier.id"
                  >{{ Supplier.name }}</option>
                </select>                    
            </div>
          </div>
          <button :disabled="form.busy" type="submit" class="btn btn-primary">خوندی کړی</button>
          <button
            :disabled="form.busy"
            class="btn btn-success"
            @click="[rows.push({   supplier_id1: '',date1:'',totalAmount1:'',description1:''
              }),refreshPicker()]"
          >اضافه کړی</button>
        </form>

Код сценария в Vue файле, как показано ниже

    export default {

  data() {
    return {
      rows: [
        {
          supplier_id1: "",
          totalAmount1: "",
          date1: "",
          description1: ""
        }
      ],
    }
    }
    ,methods: {
        refreshPicker: function() {
          $(".test").selectpicker();
          $(".test").selectpicker("render");
          $(".test").selectpicker("refresh");
          //   alert("this is also called");
        },
    getData: function() {//getDatecode }

    },
  created() {$(".test").selectpicker();}
}

Снимок здесь

Answer 1

Трудно сказать из вашего примера, в чем именно заключается проблема. Я бы предложил несколько вещей:

• Вам не нужно создавать экземпляр bootstrap -выбирать каждый раз, когда вы обновляете sh.
• Используйте vue 's this.$nextTick функция для запуска кода, основанного на обновлении dom для отображения ваших новых данных

Вот упрощенная демонстрация bootstrap выберите обновление с новыми значениями из vue https://codepen.io/Hazzamanic/pen/KKdmJzg

Я бы рекомендовал обернуть bootstrap -выбрать в компоненте, чтобы вы могли очистить дом после. Что-то вроде:

Vue.component('bootstrap-select', {
  template: '...',
  mounted: function() {
    $(this.$el).selectpicker();
  },
  beforeDestroy: function() {
    $(this.$el).selectpicker('destroy');
  }
});

РЕДАКТИРОВАТЬ: Из вашего комментария кажется, что вам нужно инициализировать новый bootstrap -выбрать. Я бы порекомендовал создать для него компонент. Эта статья должна помочь вам начать: https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

В качестве альтернативы, я настроил свой кодовый блок так, чтобы взломать решение. Это дает каждому select уникальный идентификатор с использованием атрибута v-bind:id и инициализирует выбор bootstrap всякий раз, когда вы добавляете новую строку.

Существует также компонент, который кто-то другой сделал для копирования функциональности bootstrap -select на github: https://github.com/Sandalf/vue-bootstrap-select