When trying to access $model.show() in Vue.js, the returned model is showing as undefined

I'm running into a console error message every time I try to click the button for $model.show('demo-login'):

TypeError: Cannot read property 'show' of undefined

Error output when the button is clicked:

TypeError: Cannot read property 'show' of undefined
    at click (product.vue?1da5:1)
    at ie (vue.runtime.esm.js:1854)
    at HTMLButtonElement.i (vue.runtime.esm.js:2179)
    at HTMLButtonElement.Jr.a._wrapper (vue.runtime.esm.js:6917)
re @ vue.runtime.esm.js:1888
ne @ vue.runtime.esm.js:1879
ee @ vue.runtime.esm.js:1839
ie @ vue.runtime.esm.js:1862
i @ vue.runtime.esm.js:2179
Jr.a._wrapper @ vue.runtime.esm.js:6917

My code snippet:

product.vue

<template>
    <div class="app">
        <demo-login-modal/>
        <button @click="$model.show('demo-login')">PP</button>
    </div>
</template>

<script>
import DemoLoginModal from '@/components/Modal_Login.vue';
export default {
  name: 'product',
  components: {
    DemoLoginModal,
  },
};
</script>

Main.js

import Vue from 'vue';
import Product from '@/components/product.vue';
import VModal from 'vue-js-modal';

Vue.use(VModal);

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(Product),
}).$mount('#app');

The PopUp in a copy of Model_login

Original GitHub issue here: https://github.com/euvl/vue-js-modal/issues/609

Answer №1

It appears there may be a mistake in your code

<button @click="$model.show('demo-login')">PP</button>

please correct it to

<button @click="$modal.show('demo-login')">PP</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

NodeJS and Express server is having trouble accessing the linked JavaScript file(s) from the HTML document

I'm facing a challenge with my web hosting server on AWS while using express.js. I have encountered the following error: root@ip(censored):/home/ubuntu/(censored)# /home/ubuntu/(censored)/routes/index.js:15 $(document).ready(function() { ^ Referen ...

Ensuring Consistent Height for Bootstrap Card Headers

I am currently working with bootstrap cards on two different web pages. The challenge I am facing is that on one page, the header text has a fixed height so I can easily match their card-header height using min-height. However, on the second page, the card ...

Join the geomarkers in two datasets using connecting lines

I am currently developing a leaflet.js map incorporating two distinct sets of JSON data layers stored as js-files. The first dataset comprises the geographical locations of various newsrooms along with their respective IDs, while the second dataset contai ...

Tips for Utilizing PHP Without the Need to Refresh the Page

Below are the contents of three files with their respective code: Controler.php <iframe id="frame1" style="display:none"></iframe> <iframe id="frame2" style="display:none"></iframe> <button onClick="document.getElementById(&apo ...

On the second attempt, Firefox is able to drag the div element smoothly by itself

I have created a slider resembling volume controls for players using jQuery. However, I am facing an issue ONLY IN FIREFOX. When I drag the slider for the second time, the browser itself drags the div as if dragging images. The problem disappears if I clic ...

Vue JS encounters difficulties when attempting to lazy load various images from a randomized image URL

I've implemented a code snippet for lazy loading images with different URLs: <img src="https://source.unsplash.com/1600x900/?hotel,booking.com?v=1" loading="lazy" /> <img src="https://source.unsplash.com/1600x900/?hot ...

When sending API data back to Vue from Express, the response is coming back as an empty

I am encountering an issue with my express app where I am trying to send data back from a third-party API to my front-end application. Despite being able to see the content in my express API, I am not receiving any results on the front end. Any suggestions ...

Issue encountered with AJAX request using JavaScript and Express

I'm brand new to this and have been searching online for a solution, but I can't seem to figure it out. It's possible that I'm making a basic mistake, so any assistance would be greatly appreciated. I'm trying to create a simple f ...

Form appears outside the modal window

I am facing an issue with my modal where the form inside is displaying outside of the modal itself. Despite trying to adjust the CSS display settings and switching to react-bootstrap from regular bootstrap, the problem persists. I am uncertain about what s ...

Reducing the amount of code within an if statement by utilizing JavaScript

I just finished coding a solution: if(!fs.existSync(path.join(data,file,path)){ fs.mkdirSync(path.join(data,file,path)); } if(!fs.existSync(path.join(another,file)){ fs.mkdirSync(path.join(another,file)); } if(!fs.existSync(path.join(new,file,temp,pa ...

Deploying Vue.js applications using Dokku

When testing my project locally in both development and production environments, it works perfectly. However, when attempting to deploy it to my DigitalOcean Ubuntu server through Dokku, the application crashes. # server.js at the root const express = req ...

Display an empty string when a value is NULL using jQuery's .append() function

To set an HTML value using the .append() function, I need to include AJAX data values. If the data set contains a null value, it will show as 'null' in the UI. I want to remove that 'null' and display it as blank. However, I can't ...

Error encountered while attempting to send SendGrid email to multiple recipients

Currently, I am using const sgMail = require('@sendgrid/mail'); with sendgrid version 7.6.2. Whenever I attempt to add two email addresses in an array and then pass it into either send() or sendMultiple(), an error is being thrown like below. st ...

Getting data from a response in Express.js involves using the built-in methods provided by

I am a beginner at Node.js and I'm currently experimenting with client-server communication. Below are the codes I've been working on: server: app.post('/zsa', (req, res) => { res.send("zsamo"); }); client: fetch(&qu ...

Tips for keeping the options menu visible even when the video is paused

As I was creating my own customized Video player, I encountered an issue where I wanted the options bar/menu to disappear when the user became inactive. While I have managed to achieve this functionality, I still require the option bar to remain visible ...

The functionality of CKEDITOR.tools.getindex has not been found

I'm currently in the process of updating my CKEDITOR version from 4.4.1 to 4.5.1. In order to do this, I am uploading my build-config.js file to ensure that I have all the same plugins as before with the latest CKEDITOR version. The issue arises when ...

Tips for incorporating confidence intervals into a line graph using (React) ApexCharts

How can I utilize React-ApexCharts to produce a mean line with a shaded region to visually represent the uncertainty of an estimate, such as quantiles or confidence intervals? I am looking to achieve a result similar to: ...

Customize material-ui themes using useStyles / jss

Is it possible to customize the Material-UI theme using styles without relying on !important? const customTheme = createMuiTheme({ overrides: { MuiInputBase: { input: { background: '#dd7711', padding: 10, }, ...

"Enhance your data visualization with Highcharts Windbarb and effortless AJAX data

Alright. Let's rephrase a question that hasn't been answered yet. I've got a chart below with data loading dynamically via ajax. A simplified version (without ajax) of this graph works well as shown in this jsfiddle. The code below represe ...

Is there a way to obtain an array after subscribing to an RxJS method?

I am struggling with the following code snippet: Rx.Observable.from([1,2,3,4,5,6]) .subscribe(x=>console.log(x)); Is there a way to modify this code so that instead of iterating through the array elements from the .from() method, I can return the enti ...