Some codesandbox stuff stuff

codesandbox.md

main.coffee

import Vue from "vue"
import App from "./App"

Vue.config.productionTip = false

new Vue
  el: "#app"
  render: (h) -> h App

App.vue

<template lang="pug">
  .example
    h3 Important Stuff
    p Maybe we should start with some {{ active }}...
    p How about:
    ul: li(v-for='item in this[active]') {{ item.join(', by ') }}
    button(@click='surprise') Surprise Me!
</template>

<script lang="coffee">
export default
  data: ->
    active: 'jokes'
    genres:
      jokes: 'funny jokes'
      poems: 'beautiful poems'
      thoughts: 'deep thoughts'
    jokes: [
      [ 'How many foos does it take', 'my son Sailor' ]
      [ 'Knock, knock...', 'my friend Batman' ]
      [ 'So, this guy walks into a bar', 'your crazy neighbor' ] ]
    poems: [
      [ 'The Gods of the Copybook Headings', 'Rudyard Kipling' ]
      [ 'Daffodils', 'William Wordsworth' ]
      [ 'Fire and Ice', 'Robert Frost' ] ]
    thoughts: [
      [ 'Time is relative', 'Albert Einstein' ]
      [ 'The quintic is unsolveable', 'Evariste Galois' ]
      [ 'Frankly my darling...', 'Rhett Butler' ] ]
  methods:
    pick: (ary) ->
      ary[Math.floor(Math.random() * ary.length)]
    surprise: ->
      list = Object.keys @genres
      item = @active
      item = @pick(list) until item isnt @active
      @active = item
</script>

<style lang="stylus">
  .example
    font-family: Avenir
</style>