Stop vue filter / javascript when condition is met

Question

Javascript / Vue n00b. Want to write a filter that formats a value that is a 1 - 3 digit number. I want a 1 digit number to change to '#00X', 2 digit number to '#0XX' and 3 digit to '#XXX'. So far I have this:

//Vue Filter

Vue.filter('number_filter', function (value){
  if(value.length === 1){
    value = value.toString()
    return '#00' + value;
  }else if(value.length === 2){
    value = value.toString()
    return '#0'+ value;
  }else{
    value = value.toString()
    return '#' + value;
  }
});

The filter will take 'X' and return '#X' because it doesn't break when the first condition is met. What can I do?

Use String(value).length

Anurag Srivastava
– Anurag Srivastava

2020-07-07 15:44:50 +00:00
Commented Jul 7, 2020 at 15:44 — Anurag Srivastava
– Anurag Srivastava, Commented Jul 7, 2020 at 15:44

Talha Akbar · Accepted Answer · 2020-07-07 16:07:35Z

1

You can use String.prototype.padStart() and avoid the if/else:

Vue.filter('number_filter', function (value){
    return '#' + value.toString().padStart(3, '0');
});

In your original code, the value is of Number type and you are checking on length property on Number which will always be undefined, you need to convert it to string first and then check on value:

Vue.filter('number_filter', function (value){
  value = value.toString();
  if(value.length === 1) {
    return '#00' + value;
  } else if(value.length === 2) {
    return '#0'+ value;
  } else {
    return '#' + value;
  }
});

edited Jul 7, 2020 at 16:07

answered Jul 7, 2020 at 15:54

Talha Akbar

10.1k7 gold badges41 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raffobaffo · Accepted Answer · 2020-07-07 15:46:25Z

1

You can simplify it:

Vue.filter('number_filter', function (value){

  value = value.toString()
 
  if(value.length === 1){
    return '#00' + value;
  }
  if(value.length === 2){
    return '#0'+ value;
  }
    return '#' + value;
  
});

answered Jul 7, 2020 at 15:46

Raffobaffo

2,90611 silver badges22 bronze badges

Comments

chataolauj · Accepted Answer · 2020-07-07 15:52:40Z

1

Here's a post regarding how to get the number of digits.

Also, based on your question, unless there's an overlying condition that stops someone from entering a number that contains more than 3 digits, then you're output could end being something like "#3051". You would need another else-if to check for number of digits === 3.

answered Jul 7, 2020 at 15:52

chataolauj

1193 silver badges17 bronze badges

Comments

Oyeme · Accepted Answer · 2020-07-07 16:21:50Z

1

For example:

 Vue.filter('number_filter', function (value){
     return "#"+"0".repeat(3 - value.length)+value.toString();
 });

edited Jul 7, 2020 at 16:21

answered Jul 7, 2020 at 15:50

Oyeme

11.3k4 gold badges46 silver badges66 bronze badges

Comments

Stark Buttowski · Accepted Answer · 2020-07-07 15:56:46Z

-2

The String method padStart will do for your requirement. It will add 0 for 2 digits and rest will be returned as it is.

Vue.filter('number_filter', function (value){
 return '#' + value.padStart(3, 0)
});

answered Jul 7, 2020 at 15:56

Stark Buttowski

1,8492 gold badges11 silver badges21 bronze badges

Collectives™ on Stack Overflow

Stop vue filter / javascript when condition is met

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related