The number input component that is meant to be reusable is experiencing functionality issues within the NUXT framework

Question

The number input component that is meant to be reusable is experiencing functionality issues within the NUXT framework

I have a reusable input component that is being used in various places.

Everything works well with the number input, but the issue arises when I completely clear the input. This action triggers a warning message in the console:

[Vue warn]: Invalid prop: type check failed for prop "value". Expected Number with value 0, got String with value "".

found in

---> <Numberinput> at components/utilities/numberinput.vue
       <Createproplayout> at components/layout/createproplayout.vue
         <Pages/property/create.vue> at pages/property/create.vue
           <Nuxt>
             <Layouts/form.vue> at layouts/form.vue
               <Root>

My code snippet is shown below:

Here is my reusable input component:

<template>
    <div class="normal-form">
        <!-- number input -->
        <input  
            type="number"
            :name="name" 
            :placeholder="placeholder" 
            :value="value" 
            @input="$emit('input', $event.target.value) ">
    </div>
</template>

<script>
export default {
    props: {
        name: {
            type: String,
            required: true
        },
        placeholder: {
            type: String,
            required: false,
            default: "text goes here"
        },
        value: {
            type: Number,
        }
    }
}
</script>

Usage example:

<numberinput placeholder="xxx" name="price" v-model.number="form.price.amount">Amount </numberinput>

data() {
    return {
        form: {
            price: {
                currency: 'NGN',
                amount: null,
            }
        },        
    }
},

https://i.sstatic.net/5C7o4.png Here is how it appears after entering a number and then clearing the input field.

javascript vue.js nuxt.js

Answer 1

Answer №1

The v-model.number modifier should be applied directly to the

<input type="number"

. In this case, the input will initially return a string.

To convert the string from the input into a number, you can utilize the parseFloat function.

<input  
   type="number"
   :name="name" 
   :placeholder="placeholder" 
   :value="value" 
   @input="$emit('input', parseFloat($event.target.value))">

An alternative approach is to create a functional component (compatible with Vue 2) that inherits attributes, props, and listeners from the input. This way, your component mimics a native
```
<input type="number">
```
while adding a default "type" and a wrapping div.

export default {
   name: 'number-input',
   functional: true,
   render(h, context) {
     const inputNumber = h('input', {
        ...context.data, // Inherit all HTML attributes and listeners
        props: context.props, // Inherit all props
        type: 'number',
     })
    
     return h('div', {
        staticClass: 'normal-form',
     }, [
       inputNumber
     ])
   }
}

<number-input v-model.number="form.price.amount" placeholder="xxx" name="price" />

<!-- Will compile down to -->
<div class="normal-form">
   <input type="number" v-model.number="form.price.amount" placeholder="xxx" name="price">
</div>

Answer 2

The v-model.number modifier should be applied directly to the

<input type="number"

. In this case, the input will initially return a string.

To convert the string from the input into a number, you can utilize the parseFloat function.

<input  
   type="number"
   :name="name" 
   :placeholder="placeholder" 
   :value="value" 
   @input="$emit('input', parseFloat($event.target.value))">

An alternative approach is to create a functional component (compatible with Vue 2) that inherits attributes, props, and listeners from the input. This way, your component mimics a native
```
<input type="number">
```
while adding a default "type" and a wrapping div.

export default {
   name: 'number-input',
   functional: true,
   render(h, context) {
     const inputNumber = h('input', {
        ...context.data, // Inherit all HTML attributes and listeners
        props: context.props, // Inherit all props
        type: 'number',
     })
    
     return h('div', {
        staticClass: 'normal-form',
     }, [
       inputNumber
     ])
   }
}

<number-input v-model.number="form.price.amount" placeholder="xxx" name="price" />

<!-- Will compile down to -->
<div class="normal-form">
   <input type="number" v-model.number="form.price.amount" placeholder="xxx" name="price">
</div>

Answer 3

Answer №2

Even though @Kapcash made an attempt to address the issue, I still encountered NAN showing up in the console. To resolve this issue, I implemented a watcher on the form.price.amount field. This watcher checks if the value is of type string and converts it to null if it is.

Here is the updated code snippet:

    watch: {
        "form.price.amount": function (val) {
            if (typeof val === 'string') {
                this.form.price.amount=null
            }
        }
    },

Answer 4

Even though @Kapcash made an attempt to address the issue, I still encountered NAN showing up in the console. To resolve this issue, I implemented a watcher on the form.price.amount field. This watcher checks if the value is of type string and converts it to null if it is.

Here is the updated code snippet:

    watch: {
        "form.price.amount": function (val) {
            if (typeof val === 'string') {
                this.form.price.amount=null
            }
        }
    },

The number input component that is meant to be reusable is experiencing functionality issues within the NUXT framework

Answer №1

Answer №2

Similar questions

Modify the click function from <tr> to <td> tag

What is the process for deselecting text from a text field?

What is the functionality of ng-repeat in AngularJS when used outside the "jump" table?

What is the best way to simulate a library in jest?

What is the process of exporting ES6 from main.js in Vue.js 2.0?

Having trouble setting up Nuxt with Typescript integration

Obtaining data from a CSV file and transforming it into JSON format results in an array

Experiencing Limitations with Node.JS node-hbase Scan Functionality, Unable to Retrieve More than 1000

The distinct behavior of 'this' when using arrow functions in VueJs

JavaScript treats string as a primitive value

Locate a specific data point within an array of JSON objects

Could someone teach me how to implement icon rotation in Vue.js using Vuetify?

Failure in rendering components with React and ElectronThe issue of rendering components with

Reacting with Angulatory: Response heads are not being transferred in applications

Assign the "this" keyword of App.vue to the Vuex state

Having difficulty in dynamically loading an image from an API's URL in Angular

How can I retrieve a Vuex data property from another Vuex data property?

A function cannot be used with Random Song Loop

Modify the paragraph's class upon clicking the radio button

Sort an array by mapping it in decreasing order based on the total sum of its elements