"Utilize Vue's model binding feature to assign a numerical value

I've encountered an issue while using v-model on an input box. I'm trying to bind the value as a number, but it doesn't seem to be working as expected. When I perform an operation like myModel += 25, instead of getting 125, I end up with 10025, indicating that the value is being saved as a string.

Is there a way to ensure that the input binds as a number?

Here's what my input element code looks like:

<input type="text" list="zoom-amount" v-model="project.zoom" />
<datalist id="zoom-amount">
  <option>25</option>
  <option>50</option>
  <option>100</option>
  <option>150</option>
  <option>200</option>
</datalist>
@Component
export default class WorkspaceStatusBar extends Vue {
  @Provide() public project: Project = this.activeProject

  public get activeProject() {
    return this.$store.getters['project/getActiveProject']
  }

  @Watch('activeProject')
  public onActiveProjectChanged(newProject: Project) {
    this.project = newProject
  }

}
javascripttypescriptvue.js

Answer №1

Implement v-model.number directive for project zoom functionality

Answer №2

If you are unfamiliar with the Typescript / class-based API, one strategy could involve utilizing a computed property that includes both a getter and setter. The setter function can manage the conversion to a numerical value.

computed: {
  zoom: {
    get () {
      return this.project.zoom
    },
    set (zoom) {
      this.project.zoom = Number(zoom) // alternatively, parseInt(zoom, 10)
      // Additional actions like commiting or dispatching can be performed here, such as
      // this.$store.commit(...)
    }
  }
}

Subsequently, link your input element to the computed property.

<input v-model="zoom" list="zoom-amount">

Below is my interpretation of how the class-style component might appear. It may not be perfect, but it illustrates the concept.

public get zoom (): string {
  return this.project.zoom.toString()
}

public set zoom (zoom: string) {
  this.project.zoom = Number(zoom)
}

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

"Implement a feature to recognize and handle various file extensions within an npm

I need help with my npm script where I am trying to include both ts and tsx file extensions. My current code snippet is as follows: "test": "mocha ..... app/test/**/*.spec.{ts,tsx}" Unfortunately, the above syntax is not working correctly. Can someone pl ...

javascriptnode.jsnpmpackage.jsonnpm-scripts

Working with VueJs and Vue-chartjs, there is an issue when trying to

Encountering an issue [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "chartData" (foun ...

vue.jsvue-chartjs

Updating dropdown menu choices in real-time

Here is how my signup form is structured: <input type="radio" value="a">a <input type="radio" value="b">b <select name="group"> <?php for ($i=1; $i<=4; $i++) { echo '<option value="'.$i.'">'.$i.&apos ...

phpjavascriptjqueryselect

The component is unable to retrieve the state stored within the store

I've encountered an issue with my Array component not being able to access the state "count" stored in a Redux store. I've double-checked that the store is connected and it appears in the React dev tools. The Array component is supposed to take t ...

javascriptreactjsredux

Unveiling all Gatsby.js routes/endpoints in Cypress tests: A comprehensive guide

I am currently in the process of creating end-to-end tests with Cypress for a project built on Gatsby. One specific test requires me to iterate through all pages of my Gatsby site. To accomplish this, I require a test fixture (such as endpoints.json) cont ...

javascriptreactjsgraphqlfrontendgatsby

Error in Vue class-based component: Unable to access property 'message' due to its value being null

I am currently exploring the combination of typescript and Vue for the first time in my project. I am encountering an issue that seems to be related to scope, but I could be mistaken. I referenced a small example from VueJS and adapted it as shown below: ...

javascriptvue.js

Update AngularJS data models using the callback function "on change" from a jQuery plugin

Currently, I am in the process of developing a web application for a touchscreen computer that requires an on-screen keyboard. After searching extensively, I came across this fantastic (or at least the best one I could find) keyboard plugin: https://github ...

javascriptjquerydomangularjson-screen-keyboard

Error message in Angular 2 RC-4: "Type 'FormGroup' is not compatible with type 'typeof FormGroup'"

I'm currently facing an issue with Angular 2 forms. I have successfully implemented a few forms in my project, but when trying to add this one, I encounter an error from my Angular CLI: Type 'FormGroup' is not assignable to type 'typeo ...

angularformstypescript

producing a NaN result when calling a reducer with an integer value

Could anyone assist me with this react-redux code? I have an input field that accepts numbers and adds them to the counter above. My goal is to reset the counter to 0 if the input is not a number, but currently when I type any character other than an int ...

javascriptreactjsreduxintegernan

Encountering the error of receiving "$ undefined," despite making a reference to the library

I have included the JQuery library in the following way: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> Despite trying to download the library and include it locally in my project, I ...

javascriptjquery

Unable to fulfill all the promises in JavaScript

As I develop a filter feature, I have categories and cities in the format: ['New York'], ['Cars']. The goal is to iterate through them to retrieve products based on each city or category. My approach involves storing these products in t ...

javascript

Pass the initial value from a parent component to a child component in ReactJS without the need for state management

Initially, I have a parent Component A that calculates an initial value for its child Component B. The initial value is computed in the componentDidMount() of Component A and passed to B using props: <ComponentB initialValue={this.state.value} handleCha ...

javascriptreactjs

Checking for the presence of a certain key within an object containing arrays that are value-based rather than index-based, using a Javascript

As I've been exploring various code snippets to check for the presence of object keys within arrays, I came across some brilliant examples that have been really helpful... However, my current dilemma lies in dealing with a JSON response that requires ...

javascriptarraysjson

Tips for incorporating my withStyles classes into the export class component within my React application

I'm having difficulty applying styles to my React form. I'm utilizing withStyles from Material UI. Unfortunately, the styles aren't being applied. I tested the code in my initial <DialogContentText> but it's not having any effect ...

javascriptreactjsmaterial-ui

Leveraging the package.json file to execute a separate script within the package.json file

Within my project's package.json file, I have a script called npm run script1. Additionally, my project includes a private npm package as a dependency, which contains its own set of scripts in its package.json file, including one named script2. My goa ...

javascriptnode.jsreactjsnpm

Encountering an issue with NextJS useRouter when it is utilized within a function

I have encountered a puzzling issue that I can't seem to resolve. In my experimentation with NextJS, I am attempting to access the params in the router by utilizing the useRouter hook and integrating it with the querystring plugin to parse the asPath, ...

javascriptreactjsnext.jsnext-router

Move the cursor and watch as the Hover Image seamlessly follows its path

Currently, I am attempting to create an interactive hover effect with an image that moves along with the mouse cursor. While I have come across various resources for achieving this effect, the limitation of working within a Wordpress theme restricts my ab ...

javascriptjquerymouseeventpseudo-element

Assignment on Ionic's Cascading Style Sheets classes

As I work on styling my app, I find myself struggling with the extra CSS classes that are added when I preview the source in a running app. It's particularly confusing when all I want to do is change the menu header background. In my app.html file, I ...

cssangulartypescriptionic-frameworksass

Let's update the VUE app's development server to point to my-testing-web-address.com instead of the default localhost:

I am working on a VUE application and I am trying to run it on an external link instead of localhost. I attempted to configure a vue.config.js devServer: { host: 'http://my-testing-web-address.com', port: 8080, ... } and adjusted t ...

javascriptvue.jslocalhostwebpack-dev-serverdevserver

Develop a library of components using TypeScript and Less files

I'm currently in the process of creating a React UI library that will consist of various components such as Buttons, Inputs, textareas, etc. This library, which I've temporarily named mylib, will be reused across multiple projects including one c ...

javascripttypescriptnpmwebpackbundle