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?
EDIT: YES.
From ESLint: "Variables that are declared and not used anywhere in the code are most likely an error due to incomplete refactoring. Such variables take up space in the code and can lead to confusion by readers."
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 { /* ... */ }