如何使用 Vue 关闭 Modal de Materialize CSS答案

【问题标题】：How to close Modal de Materialize CSS with Vue如何使用 Vue 关闭 Modal de Materialize CSS
【发布时间】：2019-03-18 07:26:55
【问题描述】：

如果验证正确，我正在尝试关闭 Materialize CSS 的模态，但我找不到表单。

最简单的事情是进行类型验证： v-if = "showModal" 它可以工作，但会留下模态框的背景，尽管点击不会消失。背景是一个名为“modal-overlay”的类

这是我的代码：

     <i class="material-icons modal-trigger tooltipped" style="margin-left: 2px; 
     color:#ffc107; cursor:pointer;" @click="getById(article), fillSelectCategories(), 
     titleModal='Edit', type='edit'" data-target="modal1">edit</i>

我从MaterilizeCSS的JS文件中导入了M

import M from "materialize-css/dist/js/materialize.min";

方法：

    update(){
       var elem = document.querySelectorAll('.modal'); 
       var instance = M.Modal.getInstance(elem);
       console.log(instance)

返回“未定义”

我在 update() 方法上也试过这个：

var elem = document.querySelectorAll('.modal');
elem.close();
M.Modal.close()

我从 mount 初始化了模态，它工作正常，但我无法在需要它的时候关闭它。

mounted(){
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, options);
}

但我知道还有什么可以尝试的:(

【问题讨论】：

标签： vue.js materialize

【解决方案1】：

如果不进一步研究您的代码，真的很难知道为什么事情不适合您，但我创建了这个简单的示例来演示如何完成它..

new Vue({
  el: "#app",
  data: {
    modalInstance: null,
    closeAfterTimeElapsed: true,
    seconds: 1
  },
  mounted() {
    const modal = document.querySelector('.modal')
    this.modalInstance = M.Modal.init(modal)

    const select = document.querySelector('select');
    M.FormSelect.init(select);

    M.updateTextFields();
  },
  methods: {
    handleClick() {
      if (this.closeAfterTimeElapsed) {
        setTimeout(() => { this.modalInstance.close() }, this.seconds * 1000)
      }
    }
  }
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>


<div id="app">

  <!-- Modal Trigger -->
  <button @click="handleClick" data-target="modal1" class="btn modal-trigger">Modal</button>
  
  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>

  <br>
  <br>

  <div class="row">
    <div class="input-field col s6">
      <select v-model="closeAfterTimeElapsed">
        <option :value="false">False</option>
        <option :value="true">True</option>
      </select>
      <label>Close Modal After</label>
    </div>

    <div class="input-field col s6">
      <input id="seconds" type="number" v-model="seconds">
      <label for="seconds">Seconds</label>
    </div>
  </div>
  
</div>

See this JSFiddle

【讨论】：