Question

我正在将Bootstrap Vue与Bootstrap select一起使用，并且select在模态之外完美地工作它根本不会在模态中打开。实时代码为HERE

JS文件

Vue.component("suluct", {
  template: "#suluct",
  props: {
    week: [String, Number],
    year: [String, Number],
  },

  mounted() {
    const $selectpicker = $(this.$el).find('.selectpicker');

    $selectpicker
      .selectpicker()
      .on('changed.bs.select', () => this.$emit('changeWeek', this.options[$selectpicker.val()]));
  },

  updated() {
    $(this.$el).find('.selectpicker').selectpicker('refresh');
  },

  destroyed() {
    $(this.$el).find('.selectpicker')
      .off()
      .selectpicker('destroy');
  },

  computed: {
    options() {
        // run some logic here to populate options
      return [
        {
        title: "Sunday",
        value: "sunday",
      }, {
        title: "Monday",
        value: "monday"
      }
      ]
    }
  }
})

new Vue({
  el: "#app"
})

HTML

<div id="app">
  <suluct></suluct>

  <div>
    <b-btn v-b-modal.modal1>Launch demo modal</b-btn>

    <!-- Modal Component -->
    <b-modal id="modal1" title="Bootstrap-Vue">
      <suluct></suluct>
    </b-modal>
  </div>
</div>


<script type="text/x-template" id="suluct">
  <select class="form-control selectpicker bs-select">
    <option
      v-for="(option, index) in options"
      :key="index"
      :value="option.value"
      :selected="option.selected">
      {{ option.title }}
    </option>
  </select>
</script>

下拉菜单将完全无法打开。感谢您的帮助

Answer 1

我有同样的问题。在尝试了各种方法之后，我找到了解决方案。

当您想显示模态时，请不要使用 v-b-modal 指令。

创建一个方法，使用 this。$ bvModal.show（）显示模式。

然后应使用 this。$ nextTick（[callback]）。

最终，使用JavaScript在回调方法中调用bootstrap-select 方法就像

HTML

import re

with open('lan sample text file1.txt') as file:
    condition = False
    text_to_return = ""
    for line in file:
        if condition == True:
            if line[0:5].lower() == "quit;" or line[0:4].upper() == "RUN;":
                condition = False    
            text_to_return += line
        if line[0:9].upper() == "PROC SQL;":
            condition = True
            text_to_return += line

    output_file = open("output.txt", "w")
    output_file.write(text_to_return)
    output_file.close()

Js

<b-btn @click="ShowModal">Launch demo modal</b-btn>

ps：对不起我的英语不好，希望你能理解我的意思

Bootstrap Select在Bootstrap Vue Modal内部不起作用

1 个答案: