JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<div id="vue">
  <dl v-for="dog in dogs">
    <dt>Dog</dt>
    <dd>{{dog}}</dd>
    <dt>Sniff</dt>
    <dd>{{dog.sniff()}}</dd>
    <dt>Bark</dt>
    <dd>{{dog.bark()}}</dd>
  </dl>
</div>

CSS

dl{
  border-bottom:1px solid #aaa;
}
dt{
  font-weight:bold;
}

JavaScript

const Sniffer = {
  sniff() {
    return this.name + ' sniffs around...'
  }
}
const Barker = {
  bark() {
    return 'bark bark i am ' + this.name
  }
}
class Dog {
  constructor(base) {
    Object.assign(this, {name:'Unnamed dog'}, base)
  }
}
Object.assign(Dog.prototype, Sniffer, Barker)

new Vue({
  el: '#vue',
  data: {
    dogs:[
    	new Dog({name:'Snuffles'}),
      new Dog()
    ]
  }
})