Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Advanced Vue.js - Directives, Plugins, and Render Functions Chapter 17

Instead of just spelling the coat color, we draw a little circle of that color:

...

<tbody>

<tr v-for="breed in breeds">

<td>{{breed.name}}

<div

class="ui mini circular image"

:style="'height:35px;background-color:'+breed.colour"

></div>

</td>

...

Also, instead of using numbers like in the desktop table for the affection and shedding
level, we put a heart and star rating:

...

<td>

<div class="ui heart rating">

<i

v-for="n in 5"

class="icon"

:class="{ active: n <= breed.affection }"

></i>

</div>

<div class="ui star rating">

<i

v-for="n in 5"

class="icon"

:class="{ active: n <= breed.shedding }"

></i>

</div>

</td>

</tr>

</tbody>

</table>

Also, don't forget to declare the breeds prop like in the DesktopTable component.