在Vue上显示模式

Question

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

import VModal from 'vue-js-modal';

Vue.use(VModal);

在模板上：

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

Vue部分：

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

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

Answer 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>