component emitted event but it is neither declared in the emits option nor as an prop

[kim minseok]

Hello,

I am using NumericTextBox and DropdownList Component in Vue3.

It works fine but I keep seeing warning in the browser console window.

[Vue warn]: Component emitted event "update:modelValue" but it is neither declared in the emits option nor as an "onUpdate:modelValue" prop.

I don't know how can i fix it. I need help.

thanks

This is part of my source code.

1. first tried

< Parent>

<input-prop 
	:inputValue='subItem.value' :itemKey="subItem.key"
	@changeVal='onInputValChange' :enabled='subItem.enabled'>
</input-prop>

< Child >

<template>
  <div class="input-prop-box">
    <div class="input-prop-desc" :title='description'>{{ description }}</div>
    <div class="input-prop-value">
      <ejs-numerictextbox :placeholder="emptyValue" :value='inputValue' 
           @change='onChange' :enabled="enabled"></ejs-numerictextbox>
    </div>
  </div>
</template>
<script>
import { NumericTextBoxComponent } from "@syncfusion/ej2-vue-inputs";
export default {
  name: 'NumDataComponent',
  components: {
    'ejs-numerictextbox': NumericTextBoxComponent
  },
  props: {
    description: {required: true, type: String},
    inputValue: {type: Number},
    itemKey: {type: String},
    enabled: {type: Boolean, default: true}
  },
  data: () => {
    return {
      emptyValue: "-"
    }
  },
  methods:{
    onChange: function(e){
      this.$emit('changeVal', this.itemKey, e.value)
    }
  }
}
</script>

2. second tried, (changed)

< Parent>

<input-prop 
	:modelValue='subItem.value' :itemKey="subItem.key"
	@changeVal='onInputValChange' :enabled='subItem.enabled'>
</input-prop>

< Child >

  <template>
    <div>
      <ejs-numerictextbox :placeholder="emptyValue" v-model="inputValue" :enabled="enabled">
      </ejs-numerictextbox>
    </div>
  </template>
  <script>
  import { NumericTextBoxComponent } from "@syncfusion/ej2-vue-inputs";
  export default {
    name: 'NumDataComponent',
    components: {
      'ejs-numerictextbox': NumericTextBoxComponent
    },
    props: {
      modelValue: {type: Number},
      itemKey: {type: String},
      enabled: {type: Boolean, default: true}
    },
    emits: ['update:modelValue', 'changeVal'],
    data: () => {
      return {
        emptyValue: "-"
      }
    },
    computed:{
      inputValue: {
        get(){
          return this.modelValue
        },
        set(val){
          this.onChange(val)
        }
      }
    },
    methods:{
      onChange: function(e){
        this.$emit('changeVal', e)
      }
    }
  }
  </script>

[UdhayaKumar Duraisamy]

Hi kim,

We suggest you refer to the below public blogs for the reported query,

1. https://forum.primefaces.org/viewtopic.php?t=64095
2. https://github.com/vuejs/core/issues/2651
3. https://forum.vuejs.org/t/issue-updating-a-component-from-vue-2-to-vue-3/114138
4. https://stackoverflow.com/questions/70968003/how-to-make-an-good-working-select-input-component-in-vue-3

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Kindly try the above suggestion and let us know if this meets your requirement. If we misunderstood the requirement, we request you to provide additional details about the requirement as mentioned below. This will help us validate the requirement further and provide you with a better solution.

1. Exact Requirement details.
2. Requirement use case scenario.

Regards,

Udhaya Kumar D

[kim minseok]

Hi,

Number 4 is similar to my request.

I have tested another case.

One of example code in syncfusion.

https://ej2.syncfusion.com/vue/documentation/numerictextbox/two-way-binding/

<template>

  <div id="app">

      <div id="wrapper1">

          <ejs-numerictextbox floatLabelType="Auto" placeholder="Enter a value" v-model="value"></ejs-numerictextbox>

      </div>

      <div id="wrapper2">

          <ejs-numerictextbox floatLabelType="Auto" placeholder="Enter a value" v-model="value"></ejs-numerictextbox>

      </div>

  </div>

  </template>

  <script>

  import { NumericTextBoxComponent } from "@syncfusion/ej2-vue-inputs";

 

  export default {

  components: {

    'ejs-numerictextbox': NumericTextBoxComponent

  },

   data: function(){

          return {

              value: null

          }

      }

  }

  </script>

  <style>

  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";

  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

  #wrapper1{

      min-width: 250px;

      float: left;

      margin-left: 100px;

  }

  #wrapper2{

      min-width: 250px;

      float: right;

      margin-right: 100px;

  }

 

  </style>

It also shows a warning message

[Vue warn]: Component emitted event "update:modelValue" but it is neither declared in the emits option nor as an "onUpdate:modelValue" prop.

I think this is an internal problem with component in vue3. (DropdownList Component has the same problem)

Thanks.

[Buvana Sathasivam]

Hi Kim,

We are validating your reported query. We will update you with further details on or before Sep 26, 2022.

Regards,

Buvana S`

[UdhayaKumar Duraisamy]

Hi Kim,

Sorry for the inconvenience caused.

Due to complexity, We are still validating the requirement. We will update the further details in two business days (28^th September 2022).

Regards,

Udhaya Kumar D

[UdhayaKumar Duraisamy]

Hi Kim,

Sorry for the inconvenience caused.

We have prepared a sample based on the shared code snippet and validated on our end. Unfortunately, we couldn’t reproduce the reported issue as per your scenario. We also shared a sample for reference. Also, we request you to provide additional details about the issue as mentioned below, This will help us validate the issue further and provide you with a better solution.

1. Issue reproducing sample (or modify the shared sample as per your scenario).

2. Issue replication steps.

3. Video illustration of the issue.

Sample  : https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue3sample-184869770

Regards,

Udhaya Kumar D