Bootstrap-select不适用于Vuejs中的动态填充选项

Question

我首先尝试在我的一个项目中使用bootstrap-select时已经创建了select选项，它可以正常工作，但是当select的选项是动态构建的时，插件将无法工作，并且也不会显示任何错误。我将这些$("#supplier_id").selectpicker("render");$("#supplier_id").selectpicker("refresh");包括在Bootstrap-select not working with dynamically populated options和jquery bootstrap selectpicker refreshing lists based upon previous list choice等不同答案中，但仍然无法实现我想要的。

Vue文件中的HTML代码如下

 

 <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

很难从您的示例中说出确切的问题是什么。我建议一些事情：