在 Vue 上显示模态

【问题标题】：Show modal on Vue在 Vue 上显示模态
【发布时间】：2019-03-20 12:06:17
【问题描述】：

尝试使用以下代码显示模式：

import VModal from 'vue-js-modal';

Vue.use(VModal);

在模板上：

<modal name="hello-world">
  hello, world!
</modal>

Vue部分：

myMethod() {
    this.$modal.show('hello-world');
}

尝试调用 myMethod() 时，我收到错误“无法读取未定义的属性‘显示’”。有什么想法吗？

【问题讨论】：

你需要检查this.$modal，这个对象似乎没有按预期工作。你在哪里注册这个vue-js-modal

标签： vue.js vuejs2

【解决方案1】：

这在 vue-cli 简单环境中对我有用它工作正常，经过测试

main.js

import App from "./App.vue";
import Vue from "vue";
import VModal from "vue-js-modal";

Vue.use(VModal);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <h3>Hello world test</h3>
    <modal name="hello-world">
      hello, world!
    </modal>
    <button @click="showModal">show modal</button>
  </div>
</template>
<script>
export default {
  methods: {
    showModal() {
      this.$modal.show("hello-world");
    }
  }
};
</script>

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

【讨论】：