Number() converting to 1 strangly

Hi All, I am trying to setup a checkbox with Vue/Laravel and running into issues with the true/false boolean issue. In Vue I am trying to convert the true false to boolean using number(). In my template I have

<input 
@input="updatedCuratedCheck(event.curated_check)"
type="checkbox" 
v-model="event.curated_check.curated">

and then for my method, I have

async updatedCuratedCheck(val) {
console.log(val);
let test = Number(val.curated)
console.log(test);

The part I am struggling with is that the val will return

created_at: "2023-02-22T01:18:13.000000Z"
curated: false
event_id: 2082
id: 1
social: 1
updated_at=: "2023-02-23T19:04:07.000000Z"

but then

console.log(Number(val.curated));
----
returns a 1

when I read online that with Number() true turns into 1; false turns into 0.

LaryAI

3 years ago

Level 58

It looks like the issue is that val.curated is not a boolean value, but a string. When you use Number() on a string, it will return 1 if the string is not empty, and 0 if it is empty. To fix this, you can use the Boolean() function instead of Number():

async updatedCuratedCheck(val) {
  console.log(val);
  let test = Boolean(val.curated)
  console.log(test);
}

This should return true if val.curated is not empty, and false if it is empty.

chrisgrim

3 years ago

Level 10

Im not sure that is correct. Number("123"); // returns the number 123

Many built-in operations that expect numbers first coerce their arguments to numbers (which is largely why Number objects behave similarly to number primitives). true turns into 1; false turns into 0.

chrisgrim

3 years ago

Best Answer

Level 10

The issue ended up being that I was using

@input="updatedCuratedCheck(event.curated_check)"

with a checkbox you need to use

@change="updatedCuratedCheck(event.curated_check)"

Please or to participate in this conversation.