Почему закрывается модальное окно bootstrap 4 при изменении в нем input поля?

Question

[nurdus]

Доброго времени суток.
Есть модальное окно и в нем input связанный через v-model input:

<div class="modal-body">
  <div class="form-group row" v-for="field in settings" :key="field.name">
    <label>{{ field.title }}</label>
    <div>
      <input type="text" class="form-control" v-model.lazy.number="field.value">
    </div>
  </div>
</div>

Если первый раз (!) после открытия страницы поменять значение в input, то модальное окно скрывается, при этом "затемненность", которое возникает при модальном окне остается.
Далее, покликав по странице снимаем "затемненность", затем второй раз открываем окно и пытаемся что-то поменять, в этом случае всё работает корректно.

Answer 1

[Konstantin Malyarov]

Хорошо. Теперь код модельного окна в студию.

Comments

[nurdus]

Konstantin Malyarov , добавил :)

Answer 2

[nurdus]

Состоит из 2 частей:
ModalSettings.vue

<template>
  <ModalTemplate :modalInfo="modalInfo" :settings="settings" @update="update"></ModalTemplate>
</template>

<script>
import { fields } from "./_settings.js"
import _ from "lodash"
import ModalTemplate from "~/components/Templates/Modals/ModalSettingsTemplate.vue"
import { mapState } from "vuex"

export default {
  data() {
    return {
      modalInfo: {
        name: "modalSettings", // должна быть соответствующая кнопка с data-target="#modalSettings"
        title: "Настройка раздела Входящие",
        text: ""
      },
      fields
    }
  },
  computed: {
    ...mapState({
      settings: function(state) {
        let res = _.map(this.fields, field => {
          field["value"] = state.iJobs[field.name]
          return field
        })
        return res
      }
    })
  },
  methods: {
    update: function(newValue) {
      _.forEach(newValue, field => {
        this.$store.commit(field.mutation, field.value)
      })
    }
  },
  components: {
    ModalTemplate
  }
}
</script>

ModalSettingsTemplate.vue

<template>
  <div class="modal fade" :id="modalInfo.name" tabindex="-1" role="dialog" :aria-labelledby="modalInfo.name" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{ modalInfo.title }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" v-if="modalInfo.text !== ''">
          {{ modalInfo.text }}
        </div>
        <div class="modal-body">
          <div class="form-group row" v-for="field in settings" :key="field.name">
            <label class="col-sm-4 col-form-label">{{ field.title }}</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" v-model.lazy.number="field.value">
              <small class="form-text text-muted">{{ field.help }}</small>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
          <button type="button" class="btn btn-primary" @click="updateSettings">Сохранить</button>
        </div>
      </div>
    </div>
  </div> 
</template>

<script>
export default {
  props: {
    modalInfo: Object,
    settings: Array
  },
  methods: {
    updateSettings: function() {
      this.$emit("update", this.settings)
      $("#" + this.modalInfo.name).modal("hide")
    }
  }
}
</script>