时间戳

首页 > 解决方案 > 在 Vue 上显示模态

vue.js - 在 Vue 上显示模态

问题描述

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

import VModal from 'vue-js-modal';

Vue.use(VModal);

在模板上：

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

Vue部分：

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

尝试调用 myMethod() 时，出现错误“无法读取未定义的属性‘显示’”。有任何想法吗？

标签： vue.jsvuejs2

解决方案

这在 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");

应用程序.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>

推荐阅读