fizzbu| - Fizzbuzz with dynamic height Here is a variation on a theme: fizzbuzz. After providing this answer recently, I decided to practice some VueJS skills with outputting the values and conditionally applying styles based on the value. The specific styles are as follows:


red border for Fizz
blue border for Buzz
purple border for FizzBuzz


And then I decided to allow the user to change the height of the container, in case he/she wanted a smaller viewport.

What, if anything, would you change?



const getIndex = (number, index) =&gt; index + 1;
const app = new Vue({
  el: "#app",
  data: {
    numbers: new Array(100).fill(1).map(getIndex),
    height: 3000
  },
  filters: {
    getOutput: function(number) {
      if (number % 3 === 0 &amp;&amp; number % 5 === 0) return 'FizzBuzz';
      if (number % 3 === 0) return 'Fizz';
      if (number % 5 === 0) return 'Buzz';
      return number;
    }
  },
  methods: {
    getClass: function(number) {
      const output = this.$options.filters.getOutput(number);
      if (isNaN(parseInt(output, 10))) {
       return output;
      }
      return '';
    }
  }
});
body {
  padding: 4px;
  font-family: serif;
}
h1 {
   font: 400 20px cursive;
}
input[type="range"] {
  width: 100%;
}
#listContainer {
  overflow-y: hidden;
}

li {
  background: #fff;
  color: #000000;
  border-radius: 4px;
  border: 2px solid #6a737c;
  padding: 3px;
}

li.FizzBuzz {
  border-color: #f800ff; 
}

li.Fizz {
  border-color: #f80000;
}

li.Buzz {
  border-color: #0000ff;
}
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
&lt;div id="app"&gt;
  &lt;h1&gt;
    FizzBuzz with dynamic height container
  &lt;/h1&gt;
  &lt;div&gt;
   Height: {{ height }}
  &lt;/div&gt;
  &lt;input type="range" min="200" max="3000" v-model="height" /&gt;
  &lt;div id="listContainer" v-bind:style="{ height: height + 'px'}"&gt;
    &lt;ul&gt;
      &lt;li v-for="number in numbers" :class="getClass(number)"&gt;
        {{ number | getOutput }}
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;  
&lt;/div&gt;
Found a little inconsistency in your Vue template

Using v-bind: syntax here,

&lt;div id="listContainer" v-bind:style="{ height: height + 'px'}"&gt;


... but using : shorthand here:

&lt;li v-for="number in numbers" :class="getClass(number)"&gt;


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 { /* ... */ }