Skip to main content
1 of 2
kwyntes
  • 136
  • 3

Found a little inconsistency in your Vue template

Using v-bind: syntax here,

<div id="listContainer" v-bind:style="{ height: height + 'px'}">

... but using : shorthand here:

<li v-for="number in numbers" :class="getClass(number)">

Useless variable app

const app = new Vue({ /* ... */ });

Do I need to say more?

Object method notation shorthand

Instead of using:

getOutput: function(number) { /* ... */ }
// ...
getClass: function(number) { /* ... */ }

You could use:

getOutput(number) { /* ... */ }
// ...
getClass(number) { /* ... */ }

Too specific CSS selector

You're specifying these selectors,

li.FizzBuzz { /* ... */ }
li.Fizz { /* ... */ }
li.Buzz { /* ... */ }

but there aren't any elements that would have these classes (FizzBuzz, Fizz and Buzz) other than li's. This means you could simplify it to:

.FizzBuzz { /* ... */ }
.Fizz { /* ... */ }
.Buzz { /* ... */ }
kwyntes
  • 136
  • 3