Element UI $confirm is not a function

Question

I'm getting Error in v-on handler: "TypeError: this.$confirm is not a function when calling Element UI's this.$confirm from Vue:

Maybe I'm not importing something that I should (docs and examples suggest that no additional imports are required)?

I'm trying to build a Vue app using Element UI. It has a table with a delete button in each row. The click handler calls this.$confirm to show a confirmation dialog for the user. It is not quite clear to me from Element documentation, but seems like Element extends Vue components with $confirm out of the box.

Template:

<el-table-column label="" width="180">
  <template slot-scope="scope">
    <el-button circle type="danger" @click="beginRemove(scope.row)">
      X
    </el-button>
  </template>
</el-table-column>

Script:

<script>
import * as API from '../../services/data.js'
import { ElementUI, MessageBox } from 'element-ui'; // ???
export default {
  ...
  methods: {
    beginRemove(item) {            
      this.$confirm(`Do you really want to delete ${ item.fullName } ?`,
        'Confirmation', 
        {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'warning'
        })
      ...
    }
  }
}
</script>

Dependencies (package.json):

"dependencies": {
  "element-ui": "^2.6.3",
  "lodash": "^4.17.11",
  "moment": "^2.24.0",
  "regenerator": "^0.13.3",
  "vue": "^2.6.10",
  "vue-moment": "^4.0.0"
},

I'm bootstrapping Vue like this:

import Vue from 'vue/dist/vue.js';

import {
  ElementUI, // Element is undefined when imported 
  Table, 
  TableColumn,
  Form,
  FormItem,
  Input,
  Button,
  DatePicker,
  Row,
  Col,
  Select,
  Option,
  Pagination
} from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(require('vue-moment'));
Vue.use(ElementUI);

Vue.component(Table.name, Table)
Vue.component(TableColumn.name, TableColumn)
Vue.component(Form.name, Form)
Vue.component(FormItem.name, FormItem)
Vue.component(Input.name, Input)
Vue.component(Button.name, Button)
Vue.component(DatePicker.name, DatePicker);
Vue.component(Row.name, Row);
Vue.component(Col.name, Col);
Vue.component(Select.name, Select);
Vue.component(Option.name, Option);
Vue.component(Pagination.name, Pagination);

import * as NewItem from './components/new-item/new-item.vue';
import * as NamesList from './components/names-list/names-list.vue';
import * as NamesFilter from './components/names-filter/names-filter.vue';
import * as FilterableList from './components/filterable-list/filterable-list.vue';

(The malfunctioning handler lives in the names-list component...)

Answer 1

if I import ElementUI I get this TypeError: Cannot read property 'install' of undefined

Your code incorrectly imports ElementUI as a named import. The element-ui package doesn't have a named export of ElementUI, so it would be undefined. The default import is what you would use there (but this isn't what you actually need):

//import { ElementUI } from 'element-ui' // DON'T DO THIS
import ElementUI from 'element-ui'
Vue.use(ElementUI)

Since you're importing the elements individually (to save on bundle size), you should avoid also importing ElementUI globally like this because it would defeat the bundle-size savings.

It is not quite clear for me from Element documentation, but seems like Element extends Vue components with $confirm out of the box.

The docs state that the global $confirm method is only available when fully importing Element like this:

import ElementUI from 'element-ui'
Vue.use(ElementUI)

Given you're individually importing elements, you should import the confirm method locally in a component instead. That is, import MessageBox for its confirm method:

// MyComponent.vue
import { MessageBox } from 'element-ui'

export default {
  methods: {
    handleDelete(row) {
      MessageBox.confirm(`Do you really want to delete ${row.name} ?`,
        "Confirmation",
        {
          confirmButtonText: "OK",
          cancelButtonText: "Cancel",
          type: "warning"
        })
    }
  }
}

demo

Answer 2

try code like this:

 import { Dialog, Table, TableColumn, MessageBox } from 'element-ui'
 Vue.prototype.$confirm = MessageBox.confirm