VUE 메서드에서 부트스트랩 모달 숨기기

VUE 메서드에서 부트스트랩 모달 숨기기

vuejs 컴포넌트는 내부에 작은 형식이 있는 모달 대화상자를 표시합니다.양식이 제출되면 Modal을 숨기고 싶지만 방법을 알 수 없습니다.폼이 송신되면 부모 메서드가 호출됩니다.

컴포넌트 코드입니다.

<template>
  <div>
    <div id="todoModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">{{ title }}</h4>
            <button type="button" class="close" data-dismiss="modal">
              &times;
            </button>
          </div>
          <div class="modal-body">
            <form id="todoForm" @submit.prevent="$emit('save')">
              <div class="form-group">
                <label for="name">Todo name</label>
                <input
                  id="name"
                  v-model="todo.name"
                  type="text"
                  class="form-control"
                  aria-describedby="nameHelp"
                  placeholder="Enter Todo Name"
                />
                <small id="nameHelp" class="form-text text-muted"
                  >Enter your todo's name</small
                >
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button class="btn btn-primary mr-4" type="submit" form="todoForm">
              <span v-if="mode == 'create'">Create</span>
              <span v-if="mode == 'update'">Update</span>
            </button>
            <button
              type="button"
              class="btn btn-danger mr-auto"
              data-dismiss="modal"
              @click="
                $parent.showModal = false;
                $parent.getTodos();
              "
            >
              Cancel
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CreateTodo",
  props: ["mode", "title", "todo", "showModal"],
  ref: "createTodoModal",
  mounted() {
    if (this.mode == "create") {
      this.title = "Create Todo";
    }
  },
  methods: {}
};
</script>
<style scoped></style>

여기 제 APP.js 파일이 있습니다.

<template>
  <div id="app" class="container mt-5">
    <router-view
      ref="createtodo"
      class="CreateTodo"
      name="a"
      :todo="todo"
      :title="title"
      :mode="mode"
      :show-modal="showModal"
      @save="saveTodo"
    ></router-view>
  </div>
</template>

<script>
import { APIService } from "./APIServices";
const apiService = new APIService();

export default {
  name: "App",
  data: function() {
    return {
      mode: "create",
      title: "Create Todo",
      todo: {},
      todos: [],
      numberOfTodos: 0,
      showModal: false
    };
  },
  mounted: function() {
    this.getTodos();
  },

  methods: {
    saveTodo: function() {
      if (this.mode == "create") {
        apiService.createTodo(this.todo).then(
          result => {
            if (result.status === 200) {
              this.todo = result.data;
              this.getTodos();
            }
          },
          error => {}
        );
        this.showModal = false;
        // this.$refs.createtodo.$refs.todoModal
      } else if (this.mode == "update") {
        apiService.updateTodo(this.todo).then(
          result => {
            this.getTodos();
          },
          error => {}
        );
        this.showModal = false;
      } else if (this.mode == "update") {
        apiService.updateTodo(this.todo).then(
          result => {
            this.showModal = false;
            this.getTodos();
          },
          error => {}
        );
      }
    },
  }
};
</script>

<style lang="scss">
</style>

APP.js의 Modal을 참조하기 위해 ref를 사용하려고 했지만 작동하지 않습니다.

닫기 X 버튼에 ID 추가"

<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close">
   <span aria-hidden="true">&times;</span>
</button>

그런 다음 모드를 닫는 방법을 만듭니다.

closeModal() {
   document.getElementById('close').click();
},

boostrap을 사용하는 경우 modal api가 html 요소를 (어두운 배경으로서) 즉시 생성하기 때문에 show methods라고 불러야 합니다.

$emit을 호출하는 대신 저장 방식을 만들 것을 권장합니다.이 방법에서는 저장 신호를 보내기 전에 modal hide 메서드를 호출할 수 있습니다.

<script>
import $ from 'jquery'

export default {
  name: "CreateTodo",
  props: ["mode", "title", "todo"],
  ref: "createTodoModal",
  mounted() {
    if (this.mode == "create") {
      this.title = "Create Todo";
    }
  },
  methods: {
    save() {
       $('#ModalId').modal('hide')
       this.$emit('save')
    }
  }
};
</script>

이 경우 showModal은 필요하지 않습니다.

@Dan Stoian 응답과 마찬가지로 vue.js에서 ref를 사용할 수 있습니다.

<button ref="Close" type="button" data-dismiss="modal" ...>
   ...
</button>

그리고 당신의 핸들러에는

this.$refs.Close.click();

v-if를 사용하여 모드를 표시하거나 숨길 수 있습니다.

컴포넌트:

  <div v-if="showModal">
    <div id="todoModal" class="modal fade" role="dialog">
    ...
    </div>
  </div>

및 세트showModaltrue/false를 클릭하여 각각 구성요소를 표시하거나 숨깁니다.

이 npm 패키지를 사용할 수 있습니다.

npm i vue-js-modal

https://www.npmjs.com/package/vue-js-modal

그런 다음 다음과 같이 코드를 수정해야 합니다.

<template>
<modal :name="'edit-modal'+id" height="auto">
    <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit {{ mName }}</h5>
        <button type="button" class="close" @click="hideEditModal(id)">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <form action="/user/update" method="patch" @submit.prevent="updateAssistant">
        <div class="modal-body">
            <div class="position-relative form-group">
                <label for="exampleAddress" class="">Full name</label><input name="name" v-model="editName" id="exampleAddress" placeholder="FullName" type="text" class="form-control">
                <div v-if="errors.has('editName')" class="alert alert-danger">
                    {{ errors.first('editName') }}
                </div>
            </div>

            <div class="position-relative form-group">
                <label for="exampleEmail11" class="">Email</label><input name="email" v-model="editEmail" id="exampleEmail11" placeholder="email" type="email" class="form-control">
                <div v-if="errors.has('editEmail')" class="alert alert-danger">
                    {{ errors.first('editEmail') }}
                </div>
            </div>

            <div class="position-relative form-group">
                <label for="examplePassword11" class="">Change Password</label><input name="password" v-model="editPassword" id="examplePassword11" placeholder="password" type="password" class="form-control">
                <div v-if="errors.has('password')" class="alert alert-danger">
                    {{ errors.first('password') }}
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="hideEditModal(id)">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
        <span class="loader" v-if="this.loading" style="position: absolute; bottom: 0.515rem; left: 20px;">
            <span class="ball-clip-rotate">
                <div style=" border:1px solid #000;"></div>
            </span>
        </span>
    </form>
</modal>

import Errors from '../../Errors.js'
export default {

name: 'AssistantEditModalComponent',

props: [
    'mEmail',
    'mName',
    'id'
],

data () {
    return {
        editPassword: null,
        disabled: false,
        errors: Errors,
        loading: false
    }
},

methods: {
    hideEditModal(id) {
        this.$modal.hide('edit-modal'+id);
    },

    setData() {
        this.editName = this.mName
        this.editEmail = this.mEmail
    },

    updateAssistant() {
        this.disabled = true;
        this.loading = true;
        const form = {
            editName: this.mName,
            editEmail: this.mEmail,
            password: this.editPassword
        }
        axios.patch('/user/update/'+this.id, form)
        .then((response) => {
            this.disabled = false
            this.loading = false
            this.hideEditModal(this.id)
            this.alert(response)
        })
        .catch((err) => {
            this.disabled = false
            this.loading = false
            Errors.fill(err.response.data.errors)
        })
    },

    alert(response) {
        swal(response.data.username, response.data.message, 'success')
    },
},

computed: {
    editName: {
        get: function() {
            return this.mName
        },
        set: function(value) {
            this.$emit('update:mName', value);
        }
    },
    editEmail: {
        get: function() {
            return this.mEmail
        },
        set: function(value) {
            this.$emit('update:mEmail', value);
        }
    }
}}

모달 헤더의 기본 X 단추가 아닌 닫기 단추를 추가하지 않으려면 다음과 같이 하십시오.

<b-modal
    id="user-role"
    ref="role-modal"
    hide-footer
  >
...
</b-modal>

그 후, 다음과 같이 합니다.

hideModal() {
    this.$refs["role-modal"].$refs['close-button'].click()
}

언급URL : https://stackoverflow.com/questions/56177694/bootstrap-modal-hide-from-vue-method