Styjun

How can I perform a deterministic physics simulation?

Skipping same old introductions

What's "halachic" about "Esav hates Ya'akov"?

Repeated! Factorials!

Did Logical Positivism fail because it simply denied human emotion?

Is the first page of a novel really that important?

How long should I wait to plug in my refrigerator after unplugging it?

Why wasn't interlaced CRT scanning done back and forth?

Why is Heisenberg shown dead in Negro y Azul?

Is a text with orthographic or grammatic mistakes in a language X still a text in that language X?

Is it uncompelling to continue the story with lower stakes?

Meaning of ギャップ in the following sentence

Broken bottom bracket?

Which one is more important between endgame studies and tactics?

What is the reason behind water not falling from a bucket at the top of loop?

How to design an effective polearm-bow hybrid?

Generate random number in Unity without class ambiguity

Song at end of Warehouse 13 season 4

How do I show and not tell a backstory?

Piece de Resistance - Introduction & Ace and A's

Does a humanoid possessed by a ghost register as undead to a paladin's Divine Sense?

What could prevent players from leaving an island?

Pronouns when writing from the point of view of a robot

Curious to know reasons, why Aura is not allowed in LWC

Math.round() as v-model return value

Dynamically create a Vue model based on IDVueJS nested data modelVue.js bind v-model input with prop initial valueAttaching textarea by v-model to computed with other variablesHow to bind v-model to v-selectChange Value Displayed in v-slider and v-text-field based on a v-select optionHow can I adapt the official Vue filter example to use Vuetify's `v-text-field`Vuetify Combobox Not Returning id instead of valueVee-Validate. Using flags on the field value returns undefined? Written with TypeScriptWhy do I get “Avoid mutating a prop directly” when using NumericTextField?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I have an issue with Math.round() used with v-model in the following template:

<v-text-field v-model="rounded" />

rounded is a computed property:

rounded: 
 get() 
 return this.value; 
 ,
 set (val) 
 this.value = Math.round(val);
 console.log(this.value);
 

Expected results seen in v-text-field:

 Input | Expected Value | Actual Value
===============================================
 1.12 | 1 | 1.12
 1.6 | 2 | 2

Why doesn't the v-text-field show 1 when I enter 1.12?

vue.js vuetify.js

share|improve this question

edited Mar 27 at 1:49

tony19

30.1k44 gold badges5252 silver badges8888 bronze badges

asked Mar 26 at 14:46

mohamed hajajimohamed hajaji

822 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  how are you setting the 1.6 value? Are you using rounded or this.value directly ?
  
  – Radu Diță
  Mar 26 at 15:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  v-model = "rounded"
  
  – mohamed hajaji
  Mar 26 at 15:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it's working fine for 1.6. I know one part of solution : this is happening because the int value of returned value has changed from 1 to 2. in case 1.12 the int value (1) will not change, and this is the root of the issue. because I tried Math.round(val +1) and it works fine : 1.12 => 2 , 1.6 => 3
  
  – mohamed hajaji
  Mar 26 at 15:19
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @mohamedhajaji I deleted it. This issue might be specific to Vuetify's <v-text-field> because it works if I use a simple input number field.
  
  – Ana Liza Pandac
  Mar 26 at 15:53
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  this is what i think too. thanks Liza
  
  – mohamed hajaji
  Mar 26 at 15:56
  

  
  
  
  

 | 
show 1 more comment

1

I have an issue with Math.round() used with v-model in the following template:

<v-text-field v-model="rounded" />

rounded is a computed property:

rounded: 
 get() 
 return this.value; 
 ,
 set (val) 
 this.value = Math.round(val);
 console.log(this.value);
 

Expected results seen in v-text-field:

 Input | Expected Value | Actual Value
===============================================
 1.12 | 1 | 1.12
 1.6 | 2 | 2

Why doesn't the v-text-field show 1 when I enter 1.12?

vue.js vuetify.js

share|improve this question

edited Mar 27 at 1:49

tony19

30.1k44 gold badges5252 silver badges8888 bronze badges

asked Mar 26 at 14:46

mohamed hajajimohamed hajaji

822 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  how are you setting the 1.6 value? Are you using rounded or this.value directly ?
  
  – Radu Diță
  Mar 26 at 15:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  v-model = "rounded"
  
  – mohamed hajaji
  Mar 26 at 15:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it's working fine for 1.6. I know one part of solution : this is happening because the int value of returned value has changed from 1 to 2. in case 1.12 the int value (1) will not change, and this is the root of the issue. because I tried Math.round(val +1) and it works fine : 1.12 => 2 , 1.6 => 3
  
  – mohamed hajaji
  Mar 26 at 15:19
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @mohamedhajaji I deleted it. This issue might be specific to Vuetify's <v-text-field> because it works if I use a simple input number field.
  
  – Ana Liza Pandac
  Mar 26 at 15:53
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  this is what i think too. thanks Liza
  
  – mohamed hajaji
  Mar 26 at 15:56
  

  
  
  
  

 | 
show 1 more comment

I have an issue with Math.round() used with v-model in the following template:

<v-text-field v-model="rounded" />

rounded is a computed property:

rounded: 
 get() 
 return this.value; 
 ,
 set (val) 
 this.value = Math.round(val);
 console.log(this.value);
 

Expected results seen in v-text-field:

 Input | Expected Value | Actual Value
===============================================
 1.12 | 1 | 1.12
 1.6 | 2 | 2

Why doesn't the v-text-field show 1 when I enter 1.12?

vue.js vuetify.js

share|improve this question

edited Mar 27 at 1:49

tony19

30.1k44 gold badges5252 silver badges8888 bronze badges

asked Mar 26 at 14:46

mohamed hajajimohamed hajaji

822 bronze badges

<v-text-field v-model="rounded" />

rounded: 
 get() 
 return this.value; 
 ,
 set (val) 
 this.value = Math.round(val);
 console.log(this.value);
 

 Input | Expected Value | Actual Value
===============================================
 1.12 | 1 | 1.12
 1.6 | 2 | 2

share|improve this question

edited Mar 27 at 1:49

tony19

30.1k44 gold badges5252 silver badges8888 bronze badges

asked Mar 26 at 14:46

mohamed hajajimohamed hajaji

822 bronze badges

share|improve this question

edited Mar 27 at 1:49

tony19

30.1k44 gold badges5252 silver badges8888 bronze badges

asked Mar 26 at 14:46

mohamed hajajimohamed hajaji

822 bronze badges

edited Mar 27 at 1:49

tony19

30.1k44 gold badges5252 silver badges8888 bronze badges

edited Mar 27 at 1:49

tony19

30.1k44 gold badges5252 silver badges8888 bronze badges

asked Mar 26 at 14:46

mohamed hajajimohamed hajaji

822 bronze badges

asked Mar 26 at 14:46

mohamed hajajimohamed hajaji

822 bronze badges

2 Answers
2

active

oldest

votes

0

The main cause is, you are changing the value not rounded variable, so if you do like below , hope your problem will solved.

 <v-text-field v-model="rounded" :value="val" @change="OnChange" />

and add val property into data block:

 data()
 return:
 val:0.00
 
 

No need to do anything for computed property, just write the OnChange method into methods block like below:

methods:
OnChange(newVal)
this.val = Math.round(newVal);
this. rounded=this.val;
 

share|improve this answer

edited Mar 27 at 2:05

George Jempty

7,2411111 gold badges6363 silver badges133133 bronze badges

answered Mar 27 at 1:49

Md. Mahamudul HasanMd. Mahamudul Hasan

61066 silver badges1515 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  yes, this works with v-model and :value together. unfortunately for me i can't use v-model, i have the value from a very complicated array. thanks !
  
  – mohamed hajaji
  Mar 27 at 17:03
  

  
  
  
  

add a comment | 

0

Rather than bind to a computed property, watch the value and update it.

<v-text-field v-model="rounded" />

 
 data() 
 return 
 rounded: 0
 
 ,

 watch: 
 rounded(val) 
 let newVal = Math.round(val);
 if (newVal !== val) 
 this.val = newVal
 
 // or even simply this.val = Math.round(this.val) without the check ...
 
 
 

share|improve this answer

answered Mar 27 at 1:59

Steven SpunginSteven Spungin

10.3k33 gold badges3232 silver badges3939 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it's too complicated in my case. In fact, the v-text-field has the value from an array. and it's more complicated to do a deep watch.
  
  – mohamed hajaji
  Mar 27 at 16:59
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55359966%2fmath-round-as-v-model-return-value%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

The main cause is, you are changing the value not rounded variable, so if you do like below , hope your problem will solved.

 <v-text-field v-model="rounded" :value="val" @change="OnChange" />

and add val property into data block:

 data()
 return:
 val:0.00
 
 

No need to do anything for computed property, just write the OnChange method into methods block like below:

methods:
OnChange(newVal)
this.val = Math.round(newVal);
this. rounded=this.val;
 

share|improve this answer

edited Mar 27 at 2:05

George Jempty

7,2411111 gold badges6363 silver badges133133 bronze badges

answered Mar 27 at 1:49

Md. Mahamudul HasanMd. Mahamudul Hasan

61066 silver badges1515 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  yes, this works with v-model and :value together. unfortunately for me i can't use v-model, i have the value from a very complicated array. thanks !
  
  – mohamed hajaji
  Mar 27 at 17:03
  

  
  
  
  

add a comment | 

0

The main cause is, you are changing the value not rounded variable, so if you do like below , hope your problem will solved.

 <v-text-field v-model="rounded" :value="val" @change="OnChange" />

and add val property into data block:

 data()
 return:
 val:0.00
 
 

No need to do anything for computed property, just write the OnChange method into methods block like below:

methods:
OnChange(newVal)
this.val = Math.round(newVal);
this. rounded=this.val;
 

share|improve this answer

edited Mar 27 at 2:05

George Jempty

7,2411111 gold badges6363 silver badges133133 bronze badges

answered Mar 27 at 1:49

Md. Mahamudul HasanMd. Mahamudul Hasan

61066 silver badges1515 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  yes, this works with v-model and :value together. unfortunately for me i can't use v-model, i have the value from a very complicated array. thanks !
  
  – mohamed hajaji
  Mar 27 at 17:03
  

  
  
  
  

add a comment | 

The main cause is, you are changing the value not rounded variable, so if you do like below , hope your problem will solved.

 <v-text-field v-model="rounded" :value="val" @change="OnChange" />

and add val property into data block:

 data()
 return:
 val:0.00
 
 

No need to do anything for computed property, just write the OnChange method into methods block like below:

methods:
OnChange(newVal)
this.val = Math.round(newVal);
this. rounded=this.val;
 

share|improve this answer

edited Mar 27 at 2:05

George Jempty

7,2411111 gold badges6363 silver badges133133 bronze badges

answered Mar 27 at 1:49

Md. Mahamudul HasanMd. Mahamudul Hasan

61066 silver badges1515 bronze badges

 <v-text-field v-model="rounded" :value="val" @change="OnChange" />

 data()
 return:
 val:0.00
 
 

methods:
OnChange(newVal)
this.val = Math.round(newVal);
this. rounded=this.val;
 

share|improve this answer

edited Mar 27 at 2:05

George Jempty

7,2411111 gold badges6363 silver badges133133 bronze badges

answered Mar 27 at 1:49

Md. Mahamudul HasanMd. Mahamudul Hasan

61066 silver badges1515 bronze badges

edited Mar 27 at 2:05

George Jempty

7,2411111 gold badges6363 silver badges133133 bronze badges

edited Mar 27 at 2:05

George Jempty

7,2411111 gold badges6363 silver badges133133 bronze badges

answered Mar 27 at 1:49

Md. Mahamudul HasanMd. Mahamudul Hasan

61066 silver badges1515 bronze badges

answered Mar 27 at 1:49

Md. Mahamudul HasanMd. Mahamudul Hasan

61066 silver badges1515 bronze badges

0

Rather than bind to a computed property, watch the value and update it.

<v-text-field v-model="rounded" />

 
 data() 
 return 
 rounded: 0
 
 ,

 watch: 
 rounded(val) 
 let newVal = Math.round(val);
 if (newVal !== val) 
 this.val = newVal
 
 // or even simply this.val = Math.round(this.val) without the check ...
 
 
 

share|improve this answer

answered Mar 27 at 1:59

Steven SpunginSteven Spungin

10.3k33 gold badges3232 silver badges3939 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it's too complicated in my case. In fact, the v-text-field has the value from an array. and it's more complicated to do a deep watch.
  
  – mohamed hajaji
  Mar 27 at 16:59
  

  
  
  
  

add a comment | 

0

Rather than bind to a computed property, watch the value and update it.

<v-text-field v-model="rounded" />

 
 data() 
 return 
 rounded: 0
 
 ,

 watch: 
 rounded(val) 
 let newVal = Math.round(val);
 if (newVal !== val) 
 this.val = newVal
 
 // or even simply this.val = Math.round(this.val) without the check ...
 
 
 

share|improve this answer

answered Mar 27 at 1:59

Steven SpunginSteven Spungin

10.3k33 gold badges3232 silver badges3939 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it's too complicated in my case. In fact, the v-text-field has the value from an array. and it's more complicated to do a deep watch.
  
  – mohamed hajaji
  Mar 27 at 16:59
  

  
  
  
  

add a comment | 

Rather than bind to a computed property, watch the value and update it.

<v-text-field v-model="rounded" />

 
 data() 
 return 
 rounded: 0
 
 ,

 watch: 
 rounded(val) 
 let newVal = Math.round(val);
 if (newVal !== val) 
 this.val = newVal
 
 // or even simply this.val = Math.round(this.val) without the check ...
 
 
 

share|improve this answer

answered Mar 27 at 1:59

Steven SpunginSteven Spungin

10.3k33 gold badges3232 silver badges3939 bronze badges

<v-text-field v-model="rounded" />

 
 data() 
 return 
 rounded: 0
 
 ,

 watch: 
 rounded(val) 
 let newVal = Math.round(val);
 if (newVal !== val) 
 this.val = newVal
 
 // or even simply this.val = Math.round(this.val) without the check ...
 
 
 

share|improve this answer

answered Mar 27 at 1:59

Steven SpunginSteven Spungin

10.3k33 gold badges3232 silver badges3939 bronze badges

answered Mar 27 at 1:59

Steven SpunginSteven Spungin

10.3k33 gold badges3232 silver badges3939 bronze badges

answered Mar 27 at 1:59

Steven SpunginSteven Spungin

10.3k33 gold badges3232 silver badges3939 bronze badges