Trouble with references in Vue TypeScript when trying to access child component methods

I'm encountering an issue with calling a function in a child component while using typescript

<notification ref="notification"></notification>
<button @click="$refs.notification.show()"></button>

Is there a solution to this problem? I keep getting an error message, my code seems to run but doesn't perform as expected

Object is of type 'unknown'

Here's the code snippet of the notification component

<script lang="ts">
export default{
methods:{
  show(){
    console.log('working');
      }
  }
}

Answer №1

It is recommended to use the defineExpose function within the notification component :

<script setup>

 function display(){
       console.log('working');
   }

defineExpose({
  display
})
</script>

Alternatively, you can define it in a regular script as follows:

<script lang="ts">
export default{
methods:{
  display(){
       console.log('working');
      }
  },
  expose: ['display'],
}
</script>

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

Is it possible to pass parameters using getters in Nuxt?

When attempting to pass the ID using $route.params.id in my getters method, it's not functioning as expected. Within my component, I have an object called blogs; I would like to store this.$route.params.id in blogId and then utilize it in my getters ...

Oops! Looks like we have a problem here. The system has detected duplicate keys for 'topic.ID', which could potentially lead to an update error. Let

Why am I encountering the error "Duplicate keys detected" in my list when every element has a unique ID, and I am using keys? Thank you. My component is Vue.component('list-topic', { props: ['topic'], template: "#t ...

NativeScript Error Code NG8001: Element 'ActionBar' is unrecognized

In my project, the startupscreen module setup is as follows: import { NativeScriptFormsModule } from "@nativescript/angular"; import { NativeScriptCommonModule } from "@nativescript/angular/common"; import { NgModule, NO_ERRORS_SCHEMA } ...

Securing your Laravel and Vue source code: Best practices

Recently developed a website using Laravel and Vue. Seeking advice on safeguarding the code from unauthorized copying (both PHP and VUE) while hosting the project on a VPS server? Specifically looking for ways to protect the code within the resources fol ...

Retrieve data from a JSON object within an HTML document

How do I display only the value 100 in the following div? <div> {{uploadProgress | async | json}} </div> The current displayed value is: [ { "filename": "Mailman-Linux.jpg", "progress": 100 } ] Here is my .ts file interface: interface IU ...

It appears that the functions in linqts are not clearly defined

Currently, I am in the process of learning Angular4 and facing challenges with getting linqts to function properly. Within my room-list.component.ts file, I include it in this manner: import { List } from 'linqts'; A few lines below, I have my ...

What is the best way to extract and display data from an API response object in my

{ "_metadata": { "uid": "someuid" }, "reference": [ { "locale": "en-us", ... bunch of similar key:value "close_icon_size" ...

Refresh the component following a successful POST request in Vue.js

Having issues with reloading components in my VueJS app using NUXTJS. The page in my app calls a component called “CustomerCard.” When I use fetch to communicate with my API and retrieve all customers, everything works perfectly upon arriving on the p ...

Is it possible to utilize arrow functions in Vue while using style binding?

As I venture into the world of Vue JS HTML templates, I am exploring how to bind styles using arrow functions. My goal is to toggle the visibility of a div that originates from the Vuex store. Below is my current attempt at achieving this. The main_activi ...

Creating a generic class in Typescript that can only accept two specific types is a powerful

When designing a generic class, I am faced with the requirement that a property type must be either a string or number to serve as an index. If attempting something like the code snippet below, the following error will be triggered: TS2536: Type 'T ...

Update the mandatory fields in the required interface to extend to another interface, while ensuring that all subfields become

Currently, I have defined 2 interfaces: interface BattleSkills { strength: number; armor: number; magic_resistance: number; health: number; mana: number; intelligence: number; accuracy: number; agility: number; critical_damage: number; } ...

Accordion Functionality in Vue with Animation Effects

I'm struggling to implement a smooth transition for the Accordion component, but unfortunately it's not working as expected. Everything else is functioning correctly except for the animation. template: <div class="accordion"> <di ...

Having trouble with `npm run watch` stopping after compiling once on Laravel 8 Homestead with Vue integration?

Every time I use npm run watch, it successfully compiles my changes and updates the pages. However, after making subsequent edits, it stops updating the page without any errors showing up. Restarting npm run watch resolves this issue, indicating that it ma ...

Older versions of javascript offered the assurance of a promise

Working with TypeScript and the latest ECMAScript 6 feature Promise at the moment. I'm wondering if it's possible to use Promise even if my TypeScript code is compiled into an ECMAScript 3 js-file, considering that Promise wasn't available i ...

Typescript issue when a value is possibly a function or null

I have defined a type called StateProps with the following properties type StateProps = { isPending: boolean, asyncFn: (...args: any[]) => void | null } To initialize, I set up an initialState variable where the asyncFn property is initially s ...

Vue.JS and its Onclick event handler allows for dynamic and interactive

These are my two buttons: <button onclick="filterSelection('Action')">Action</button> and <button onclick="filterSelection('Adventure')">Adventure</button> Now, I'm trying to achieve the same fun ...

Merge arrays with identical names within the same object into one cohesive object containing all elements

I just started using Vue and I'm not entirely sure if it's possible to achieve what I have in mind. Here is the structure I have: { "items":[ { "total":1287, "currency":"USD", "name":"string", "itemID":"", "pro ...

How to Change the Checked State of a Checkbox in React Material UI

I am faced with a situation where I have multiple checkboxes that are used to toggle table columns on and off. The code snippet demonstrates how it looks: const [fields, setFields] = useState<Set<string>>(new Set(["name"])); const ...

What is the best way to implement filter functionality for individual columns in an Angular material table using ngFor?

I am using ngFor to populate my column names and corresponding data in Angular. How can I implement a separate filter row for each column in an Angular Material table? This filter row should appear below the header row, which displays the different column ...

How can I use the v-bind method without triggering it "automatically"?

I have been trying to implement the functionality provided by the "vue2-touch-events" package in my project. My goal is to create a list of images and trigger a popup when an image is pressed and held, while also allowing the image to be opened with a norm ...