Using the Vue composition API to invoke a method within a child component

Summary: How can I achieve the same functionality in Vue 3 composition API as using this.$refs in Vue 2?

I am currently working on integrating PrimeVue's CustomUpload feature into a Vue 3 project. However, I have encountered an issue where the uploaded files are not cleared automatically after uploading. To resolve this, I need to call the clear() method of the child component from the parent component to clear the files and refresh the button.

Below is a snippet from my App.vue file:

<template>
  <FileUpload
    name="upload"
    url="/"
    mode="basic"
    :auto="true"
    :maxFileSize="26214400"
    :fileLimit="1"
    :customUpload="true"
    @uploader="upload"
  />
  <Button name="lalaal">qweeq</Button>
</template>

<script>
import FileUpload from 'primevue/fileupload'

export default {
  setup() {
    const upload = e => {
      console.log('testing', e)
    }
    return { upload }
  },
  components: {
    FileUpload
  }
}
</script>

Thank you

Answer №1

If you take advantage of the template ref feature, you can simplify your code by using uploadFile.value instead of this.$refs.uploadFile:

<template>
  <FileUpload
    ref="uploadFile"
    name="upload"
    url="/"
    mode="basic"
    :auto="true"
    :maxFileSize="26214400"
    :fileLimit="1"
    :customUpload="true"
    @uploader="upload"
  />
  <Button name="lalaal">qweeq</Button>
</template>

<script>
import FileUpload from 'primevue/fileupload'
import {ref} from "vue";

export default {
  setup() {
    const uploadFile=ref(null)
 
    
    const upload = e => {
      console.log('testing', e)
    }
    return { upload,uploadFile}
  },
  components: {
    FileUpload
  }
}
</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

Which is Better: Parsing Django Models on the Server Side or Client Side?

What is considered the most effective practice for displaying model objects on the client side while working on Django app development? Is it recommended to parse the models using server-side code or is it better to utilize client-side templating languages ...

Can we stub these types of functions in any manner?

One file named helperFunction.js contains the following code: module.exports = (arg1, arg2) => { \\function body } To use this function in another file named file.js, you can simply call it like this: let helperFunction = require(' ...

Converting a string to a date in JavaScript

Is there a way to convert a string like "20150415" into a date with the format "2015, April, 15th"? I've come across multiple examples, but they all involve splitting with "-" or "/", which doesn't work for my case. Below is my current code snip ...

I'm experiencing an issue with uploading an image to Firebase as I continue to encounter an error message stating "task.on is not a function."

The console displays a message confirming a successful upload. const sendPost = () => { const id = uuid(); const storage = getStorage(); const storageRef = ref(storage, `posts/${id}`) const uploadTask = uploadString(storageRe ...

value in the text field changing when focused

Is there a JQuery solution for displaying the keyword when text is entered in the value input? Click here to view an image example. ...

Is there a way to transfer CSS classes to React children and guarantee they take precedence over the child's own class styles?

I am trying to pass a CSS class from the parent component into the child component. Here is an example: <Parent> <Child /> </Parent> In order to apply a class from the parent to the <Child />, I have done this: <Parent> ...

Ensure to verify the presence of a specific element in an array prior to examining the rest in Javascript

I am currently working with an array of objects and I need to check if any of the objects have a title of 'food' before checking for any other titles. However, my current code checks sequentially. Below you will find the code snippet: let db = ...

What is the best way to retrieve a value from within the callback function while working in the global scope

While working with express Js, I encountered a situation where I needed to export the port on which the server is running for testing purposes. However, I found that the port value is only accessible within the callback function of app.listen. Is there a ...

ReactJS issue: I am unable to display the dropdown menu while looping through an array

Although the title may be confusing, I am facing an issue in my Laravel project that integrates ReactJS on the front end. I am attempting to create a dropdown menu for users to select the status of a project. The statuses and their IDs are retrieved from a ...

Save the current application state as either a JSON or TSV file within the backend

While many React tutorials on surveys/forms focus on front-end mechanics, I find myself in a different boat. My front-end is pretty much where I want it to be, but I have realized that my knowledge of back-end programming is virtually nonexistent. I decid ...

Parsing form bodies in Express.js allows for easy extraction of data

Below is an example of a form: <!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> < ...

Resolving typescript error in my custom hook

Implementing this ResizeObserver hook in my project using typescript const useResizeObserver = () => { const [entry, setEntry] = useState<ResizeObserverEntry>(); const [node, setNode] = useState<Element | null>(null); const observer = ...

In the iOS app when the Ionic HTML5 select keypad is opened, a bug causes the view to scroll upwards and create empty space after tapping the tab

I am currently working with Ionic v1 and AngularJS, utilizing ion tabs: <ion-tabs class="tabs-icon-top tabs-color-active-positive"> <!-- Home Tab --> <ion-tab icon-off="ion-home" icon-on="ion-home" href="#/tab/home"> <ion-nav ...

Guide to changing a 10-digit number field to a string field in MongoDB

Looking to change the mobile field to a string in MongoDB. { "_id": "1373b7723", "firstname": "name1", "mobile":1000000099 }, { "_id": "137be30723", "firstname": "name2&qu ...

Encountering a random MS JScript runtime error message after a few alerts

Encountering this issue when clicking the "Ok" button on an alert window. Error message: Unhandled exception at line 1, column 1 in a lengthy URI Error code: 0x800a138f - Microsoft JScript runtime error: Object expected This problem is occurring within ...

Move the alt attribute from the image to the paragraph text using jQuery or JavaScript and replace it

Struggling to crack the code conundrum that has been taunting me for what seems like an eternity! <div id="slider"> <ul> <!-- --> <li><a target="_blank" href="ANOUK-2014-De-l ...

Tips for showcasing a dataset within a table using Angular.js ng-repeat

I am encountering an issue where I have to present an array of data within a table using Angular.js. Below is an explanation of my code. Table: <table class="table table-bordered table-striped table-hover" id="dataTable" > <tbody> ...

Preventing default behavior in Firefox using jQuery with event.preventDefault()

Having encountered issues with event.preventDefault() specifically in Firefox, I noticed that the jQuery code included below is not functioning as intended. $("#facebook-del-1").click(function(){ event.preventDefault(); var selector = "#"+$(this).attr("id ...

Removing an object from an array when a certain key value already exists in TypeScript

I'm currently facing an issue with my function that adds objects to an array. The problem arises when a key value already exists in the array - it still gets added again, but I want it to only add if it doesn't exist yet. Here's what I have: ...

Tips for dynamically appending a string to a predefined variable in React

When I was working on creating a text input space using the input type area and utilizing the onChange utility, everything was running smoothly. Now, my task is to incorporate an emoji bar and insert a specific emoji into the input space upon clicking it. ...