Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

328
Views
how to remove deprecated $listeners in vue 3

In migration from vue 2 to vue 3, i am getting some compilation warnings. Deprecation of $listeners in components is one of those warnings. I have checked official documentation to use $attrs by removing $listeners. I am new in vue 3. So, not able to understand how to handle those warnings related to listeners.

Here is the snippet: 1st case: Component 1

    <template>
    <div>
        <input ref="input"
               :value="txtField"
               @input="txtField=$event.target.value"
               :type="inputType"
               :class="inputClass"
               :placeholder="placeholder"
               :disabled="disabled"
               :readonly="readonly"
               :onfocus="disabled&&'this.blur();'"
               :tabindex="tabindex"
               v-on="listenersInput" // here is the method where $listeners used
               @keyup.enter="enterHandler"
               @blur="validateOnEvent"/>
     </div>
</template>

//method 

listenersInput() {
            //var vm = this;
            return Object.assign({}, this.$listeners, {
                input: function(event){ /*vm.$emit('input',event.target.value);*/}
            });
        },

2nd case: Component 2

    <template>
    <custom-button v-bind="buttonProps"
                 v-on="$listeners"
                 :class="buttonClass"
                 @click="tooggle"></custom-button>
</template>

How to handle these two cases?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

In Vue 3 $listeners moved to $attrs you can use v-bind="$attrs". Here is an article from docs

Additional documentation: https://vuejs.org/guide/components/attrs.html#nested-component-inheritance

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!