Skip to main content
Code Review

Return to Answer

replaced https://vuejs.org/v2 with https://v2.vuejs.org/v2
Source Link
Community Bot
Community Bot
  • 1

You could use the Object SyntaxObject Syntax to specify the class bindings instead of the Array SyntaxArray Syntax:

<input type='button' id='red' :class='{"btn": true, "btn-danger": (count % 3 === 0)}'  />

That "btn": true is okay but a little annoying. Luckily "it’s also possible to use the object syntax inside array syntax"11

<input type='button' id='red' :class='["btn", {"btn-danger": (count % 3 === 0)}]'  />

The documentation uses double quotes and I attempted to use those but it didn't appear to work - perhaps because btn-danger needs to be surrounded by quotes.

<input type='button' id='red' :class="[btn, {'btn-danger': (count % 3 === 0)}]" />

There doesn't appear to be anything dynamic about the styles in styleObject, so those can be moved out of the business logic and maintained with the other styles in the CSS section.

The interval function could be simplified using the increment operator:

setInterval(function() {
  app.count++;
}, 1000);

See the rewritten code that utilizes the advice above.

var app = new Vue({
  el: '#app',
  data: {
    count: 0    
  }
});

setInterval(function() {
  app.count++;
}, 1000);
#light {
  background-color: yellow;
  display: inline-block;
  border: 2px solid black;
  margin: 10px;
  padding: 5px;
}

#light .btn {
  display: block;
  width: 30px;
  margin: 0;
  border-radius: 50px;
  border: 1px solid black;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <div id='light'>
    <input type='button' id='red' :class='["btn", {"btn-danger": (count % 3 === 0)}]'  />
    <br />
    <input type='button' id='yellow' :class='["btn", {"btn-warning": (count % 3 === 1)}]'  />
    <br />
    <input type='button' id='green' :class='["btn", {"btn-success": (count % 3 === 2)}]'  />
  </div>
</div>

1https://v2.vuejs.org/v2/guide/class-and-style.html#Array-Syntax

You could use the Object Syntax to specify the class bindings instead of the Array Syntax:

<input type='button' id='red' :class='{"btn": true, "btn-danger": (count % 3 === 0)}'  />

That "btn": true is okay but a little annoying. Luckily "it’s also possible to use the object syntax inside array syntax"1

<input type='button' id='red' :class='["btn", {"btn-danger": (count % 3 === 0)}]'  />

The documentation uses double quotes and I attempted to use those but it didn't appear to work - perhaps because btn-danger needs to be surrounded by quotes.

<input type='button' id='red' :class="[btn, {'btn-danger': (count % 3 === 0)}]" />

There doesn't appear to be anything dynamic about the styles in styleObject, so those can be moved out of the business logic and maintained with the other styles in the CSS section.

The interval function could be simplified using the increment operator:

setInterval(function() {
  app.count++;
}, 1000);

See the rewritten code that utilizes the advice above.

var app = new Vue({
  el: '#app',
  data: {
    count: 0    
  }
});

setInterval(function() {
  app.count++;
}, 1000);
#light {
  background-color: yellow;
  display: inline-block;
  border: 2px solid black;
  margin: 10px;
  padding: 5px;
}

#light .btn {
  display: block;
  width: 30px;
  margin: 0;
  border-radius: 50px;
  border: 1px solid black;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <div id='light'>
    <input type='button' id='red' :class='["btn", {"btn-danger": (count % 3 === 0)}]'  />
    <br />
    <input type='button' id='yellow' :class='["btn", {"btn-warning": (count % 3 === 1)}]'  />
    <br />
    <input type='button' id='green' :class='["btn", {"btn-success": (count % 3 === 2)}]'  />
  </div>
</div>

1https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax

You could use the Object Syntax to specify the class bindings instead of the Array Syntax:

<input type='button' id='red' :class='{"btn": true, "btn-danger": (count % 3 === 0)}'  />

That "btn": true is okay but a little annoying. Luckily "it’s also possible to use the object syntax inside array syntax"1

<input type='button' id='red' :class='["btn", {"btn-danger": (count % 3 === 0)}]'  />

The documentation uses double quotes and I attempted to use those but it didn't appear to work - perhaps because btn-danger needs to be surrounded by quotes.

<input type='button' id='red' :class="[btn, {'btn-danger': (count % 3 === 0)}]" />

There doesn't appear to be anything dynamic about the styles in styleObject, so those can be moved out of the business logic and maintained with the other styles in the CSS section.

The interval function could be simplified using the increment operator:

setInterval(function() {
  app.count++;
}, 1000);

See the rewritten code that utilizes the advice above.

var app = new Vue({
  el: '#app',
  data: {
    count: 0    
  }
});

setInterval(function() {
  app.count++;
}, 1000);
#light {
  background-color: yellow;
  display: inline-block;
  border: 2px solid black;
  margin: 10px;
  padding: 5px;
}

#light .btn {
  display: block;
  width: 30px;
  margin: 0;
  border-radius: 50px;
  border: 1px solid black;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <div id='light'>
    <input type='button' id='red' :class='["btn", {"btn-danger": (count % 3 === 0)}]'  />
    <br />
    <input type='button' id='yellow' :class='["btn", {"btn-warning": (count % 3 === 1)}]'  />
    <br />
    <input type='button' id='green' :class='["btn", {"btn-success": (count % 3 === 2)}]'  />
  </div>
</div>

1https://v2.vuejs.org/v2/guide/class-and-style.html#Array-Syntax

edited body
Source Link
Sᴀᴍ Onᴇᴌᴀ ♦
Sᴀᴍ Onᴇᴌᴀ ♦
  • 29.6k
  • 16
  • 46
  • 203

You could use the Object Syntax to specify the class bindings instead of the Array Syntax:

<input type='button' id='red' :class='{"btn": true, "btn-danger": (count % 3 === 0)}'  />

That "btn": true is okay but a little annoying. Luckily "it’s also possible to use the object syntax inside array syntax"1

<input type='button' id='red' :class='["btn", {"btn-danger": (count % 3 === 0)}]'  />

theThe documentation uses double quotes and I attempted to use those but it didn't appear to work - perhaps because btn-danger needs to be surrounded by quotes.

<input type='button' id='red' :class="[btn, {'btn-danger': (count % 3 === 0)}]" />

There doesn't appear to be anything dynamic about the styles in styleObject, so those can be moved out of the business logic and maintained with the other styles in the CSS section.

The interval function could be simplified using the increment operator:

setInterval(function() {
  app.count++;
}, 1000);

See the rewritten code that utilizes the advice above.

var app = new Vue({
  el: '#app',
  data: {
    count: 0    
  }
});

setInterval(function() {
  app.count++;
}, 1000);
#light {
  background-color: yellow;
  display: inline-block;
  border: 2px solid black;
  margin: 10px;
  padding: 5px;
}

#light .btn {
  display: block;
  width: 30px;
  margin: 0;
  border-radius: 50px;
  border: 1px solid black;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <div id='light'>
    <input type='button' id='red' :class='["btn", {"btn-danger": (count % 3 === 0)}]'  />
    <br />
    <input type='button' id='yellow' :class='["btn", {"btn-warning": (count % 3 === 1)}]'  />
    <br />
    <input type='button' id='green' :class='["btn", {"btn-success": (count % 3 === 2)}]'  />
  </div>
</div>

1https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax

You could use the Object Syntax to specify the class bindings instead of the Array Syntax:

<input type='button' id='red' :class='{"btn": true, "btn-danger": (count % 3 === 0)}'  />

That "btn": true is okay but a little annoying. Luckily "it’s also possible to use the object syntax inside array syntax"1

<input type='button' id='red' :class='["btn", {"btn-danger": (count % 3 === 0)}]'  />

the documentation uses double quotes and I attempted to use those but it didn't appear to work - perhaps because btn-danger needs to be surrounded by quotes.

<input type='button' id='red' :class="[btn, {'btn-danger': (count % 3 === 0)}]" />

There doesn't appear to be anything dynamic about the styles in styleObject, so those can be moved out of the business logic and maintained with the other styles in the CSS section.

The interval function could be simplified using the increment operator:

setInterval(function() {
  app.count++;
}, 1000);

See the rewritten code that utilizes the advice above.

var app = new Vue({
  el: '#app',
  data: {
    count: 0    
  }
});

setInterval(function() {
  app.count++;
}, 1000);
#light {
  background-color: yellow;
  display: inline-block;
  border: 2px solid black;
  margin: 10px;
  padding: 5px;
}

#light .btn {
  display: block;
  width: 30px;
  margin: 0;
  border-radius: 50px;
  border: 1px solid black;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <div id='light'>
    <input type='button' id='red' :class='["btn", {"btn-danger": (count % 3 === 0)}]'  />
    <br />
    <input type='button' id='yellow' :class='["btn", {"btn-warning": (count % 3 === 1)}]'  />
    <br />
    <input type='button' id='green' :class='["btn", {"btn-success": (count % 3 === 2)}]'  />
  </div>
</div>

1https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax

You could use the Object Syntax to specify the class bindings instead of the Array Syntax:

<input type='button' id='red' :class='{"btn": true, "btn-danger": (count % 3 === 0)}'  />

That "btn": true is okay but a little annoying. Luckily "it’s also possible to use the object syntax inside array syntax"1

<input type='button' id='red' :class='["btn", {"btn-danger": (count % 3 === 0)}]'  />

The documentation uses double quotes and I attempted to use those but it didn't appear to work - perhaps because btn-danger needs to be surrounded by quotes.

<input type='button' id='red' :class="[btn, {'btn-danger': (count % 3 === 0)}]" />

There doesn't appear to be anything dynamic about the styles in styleObject, so those can be moved out of the business logic and maintained with the other styles in the CSS section.

The interval function could be simplified using the increment operator:

setInterval(function() {
  app.count++;
}, 1000);

See the rewritten code that utilizes the advice above.

var app = new Vue({
  el: '#app',
  data: {
    count: 0    
  }
});

setInterval(function() {
  app.count++;
}, 1000);
#light {
  background-color: yellow;
  display: inline-block;
  border: 2px solid black;
  margin: 10px;
  padding: 5px;
}

#light .btn {
  display: block;
  width: 30px;
  margin: 0;
  border-radius: 50px;
  border: 1px solid black;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <div id='light'>
    <input type='button' id='red' :class='["btn", {"btn-danger": (count % 3 === 0)}]'  />
    <br />
    <input type='button' id='yellow' :class='["btn", {"btn-warning": (count % 3 === 1)}]'  />
    <br />
    <input type='button' id='green' :class='["btn", {"btn-success": (count % 3 === 2)}]'  />
  </div>
</div>

1https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax

Source Link
Sᴀᴍ Onᴇᴌᴀ ♦
Sᴀᴍ Onᴇᴌᴀ ♦
  • 29.6k
  • 16
  • 46
  • 203

You could use the Object Syntax to specify the class bindings instead of the Array Syntax:

<input type='button' id='red' :class='{"btn": true, "btn-danger": (count % 3 === 0)}'  />

That "btn": true is okay but a little annoying. Luckily "it’s also possible to use the object syntax inside array syntax"1

<input type='button' id='red' :class='["btn", {"btn-danger": (count % 3 === 0)}]'  />

the documentation uses double quotes and I attempted to use those but it didn't appear to work - perhaps because btn-danger needs to be surrounded by quotes.

<input type='button' id='red' :class="[btn, {'btn-danger': (count % 3 === 0)}]" />

There doesn't appear to be anything dynamic about the styles in styleObject, so those can be moved out of the business logic and maintained with the other styles in the CSS section.

The interval function could be simplified using the increment operator:

setInterval(function() {
  app.count++;
}, 1000);

See the rewritten code that utilizes the advice above.

var app = new Vue({
  el: '#app',
  data: {
    count: 0    
  }
});

setInterval(function() {
  app.count++;
}, 1000);
#light {
  background-color: yellow;
  display: inline-block;
  border: 2px solid black;
  margin: 10px;
  padding: 5px;
}

#light .btn {
  display: block;
  width: 30px;
  margin: 0;
  border-radius: 50px;
  border: 1px solid black;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <div id='light'>
    <input type='button' id='red' :class='["btn", {"btn-danger": (count % 3 === 0)}]'  />
    <br />
    <input type='button' id='yellow' :class='["btn", {"btn-warning": (count % 3 === 1)}]'  />
    <br />
    <input type='button' id='green' :class='["btn", {"btn-success": (count % 3 === 2)}]'  />
  </div>
</div>

1https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax