Question

在我的一个vue组件中，我有一个按钮，可以按如下方式打开Semantic-UI modal：

模板：

<template>
<div>
 ...
 <button type="button" @click="openModal()"> Open </button>
 <div class="ui modal" id="confirmMod">
    <i class="close icon"></i>
    <div class="header">
      Modal Title
    </div>
    <div class="image content">
      <div class="image">
        An image can appear on left or an icon
      </div>
      <div class="description">
        A description can appear on the right
      </div>
    </div>
    <div class="actions">
      <div class="ui button">Cancel</div>
      <div class="ui button">OK</div>
    </div>
  </div>
 </div>
</div>
</template>

脚本：

<script>
  export default {
    ...
    methods: {
      openModal() {
        $('#confirmMod').modal('show')
      }
    }
  }
</script>

但是，当我点击按钮打开模态时，控制台会显示此错误：

Uncaught TypeError: $(...).modal is not a function

我在html中添加了jquery，并在webpack中添加了插件（我使用了vue-cli来初始化vue webpack样板文件）。

非常感谢任何帮助。

Answer 1

找到解决方案。对于那些有这个问题的人，这里是做什么的：

1）在webpack配置文件中添加jQuery作为插件：

plugins: [
    ...
    // JQUERY plugin
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    }),
    ...
]

2）在main.js的顶部添加语义ui css / js（您在其中启动Vue应用程序的文件）：

import '../static/semantic/dist/semantic.css'
import '../static/semantic/dist/semantic.js'
import Vue from 'vue'
import App from './App'
...

3）像往常一样在jquery中调用模态：$（＆＃39; .ui.modal＆＃39;）。modal（）

我希望这会有所帮助。

Vue.JS＆amp; Semanti-UI模式

1 个答案: