JSFiddle - React, Tailwind, and code Playground

by Pantelis Peslis

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.js"></script>
<div id="app">

  <input type="radio" name="rad" v-model="currentLanguage" value="english">English<br>
  <input type="radio" name="rad" v-model="currentLanguage" value="french">French<br>

  <div v-for="word in words | t">{{ word.value }}</div>

  <pre>{{ currentLanguage | json }}</pre>
</div>

CSS

pre {
  margin-top: 50px;
}

JavaScript

var currLang = {
  value: 'french',
  get () {
    return this.value
  },
  set (lang) {
    this.value = lang
  }
}

Vue.util.defineReactive({}, null, currLang)

Vue.filter('t', function(words) {
  return words.filter(function(word) {
    return word.lang === this.currentLanguage
  }.bind(this))
})

var app = new Vue({
  el: '#app',

  data: {
    words: [
      { lang: "english", value: "Hello" },
      { lang: "french", value: "Bonjour" }
    ]
  },

  computed: {
    currentLanguage: {
      get () {
        return currLang.get()
      },
      set (lang) {
        currLang.set(lang)
      }
    }
  }
})