Показать модал на Vue

Question

Попытка показать модал со следующим кодом:

import VModal from 'vue-js-modal';

Vue.use(VModal);

В шаблоне:

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

Vue part:

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

При попытке вызоваmyMethod (), я получаю сообщение об ошибке «Не удается прочитать свойство 'show' of undefined".Есть идеи?

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>