Number input saved as string in QPopupEdit in QTable

tvogel commented 1 year ago

What happened?

When I am using a <q-input type="number"> inside a <q-popup-edit> in a <q-td>, I need to specify the value to change as v-model.number="props.row.myvalue" instead of just v-model="props.row.myvalue" and it is not obvious why it is not enough to have the <q-input> output a number.

This may be a similar issue as https://github.com/quasarframework/quasar/issues/3924 .

Please see the codepen for trying it out.

What did you expect to happen?

I would have expected that specifying type="number" for the <q-input> to be enough.

Reproduction URL

https://codepen.io/eijk/pen/BaqqRLK

How to reproduce?

Go to the codepen
Change any number in the Bad column
Observe how the row data below the table changes the bad value from number to string (quotes get added)

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Firefox

Quasar info output

Operating System - Linux(6.2.12-1-default) - linux/x64
NodeJs - 18.16.0

Global packages
  NPM - 9.5.1
  yarn - 1.22.19
  @quasar/cli - 2.0.1
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.12.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.4.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.3 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.3.2 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.0
  pinia - 2.0.36 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.15 -- Native-ESM powered web dev build tool
  eslint - 8.40.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

pdanpdan commented 1 year ago

Duplicate of #3924, as indicated in the issue Input type number returns string That's why .number modified exists

tvogel commented 1 year ago

Ah, sorry, I misunderstood the initial reply

https://github.com/quasarframework/quasar/issues/3924#issuecomment-484625156

on the other issue that it is intended to work otherwise while I now understand it is not. Thanks!

Divensky commented 1 week ago

For the record, I found that type = number for an input type="number" gives a "type check failed" warning in the console when the input is blank. The browser returns this value as an empty string and then Vue relays this empty string (docs: "If the value cannot be parsed with parseFloat(), then the original value is used instead").

This can be seen in a demo: https://github.com/divensky/quasar-inputs.

quasarframework / quasar