JSFiddle - React, Tailwind, and code Playground

by cannap

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<div id="app">
  <nav>{{ $t('ABOUT') }} | {{ $t('EXIT') }}</nav>
  <select @change="updateLocale">
    <option v-for="(value, lang) in dictionary" :value="lang">{{ dictionary[lang].LANG }}</option>
  </select>
  <div class="projects">
    <label v-for="project in projects">
      <input type="checkbox" v-model="project.selected" value="project.value" @change="totalChecked"> {{ project.name }}
    </label>
  </div>
  <p>{{ $t('SELECTED', { num: selectedProjectsTotal }) }}</p>
</div>

CSS

* {
  font-family: sans-serif;
}

.projects {
  margin-top: 20px;
}

Babel + JSX

console.clear();

var dictionary = {
  'en-us': {
    'ABOUT': 'About',
    'EXIT': 'Exit',
    'LANG': 'English (US)',
    'SELECTED': '{num} Selected Projects'
  },
  'de': {
    'ABOUT': 'Über',
    'EXIT': 'Beenden',
    'LANG': 'Deutsch',
    'SELECTED': '{num} Ausgewählte Projekte'
  },
  'fr': {
    'ABOUT': 'À propos',
    'EXIT': 'Quitter',
    'LANG': 'Français',
    'SELECTED': '{num} Projets Sélectionnés'
  }
};

// Vue-I18n library
var i18n = new VueI18n({
  locale: 'en-us',
  messages: dictionary
});

var app = new Vue({
  el: '#app',
  data: {
    dictionary: i18n.messages,
    projects: [{
      selected: false,
      name: 'Potato Project',
      value: 'potato'
    }, {
      selected: false,
      name: 'Cow Project',
      value: 'cow'
    }],
    selectedProjectsTotal: 0
  },
  i18n: i18n,
  methods: {
    updateLocale: function(evt) {
      var lang = evt.currentTarget.value;
      i18n.locale = lang;
    },
    totalChecked: function() {
      this.selectedProjectsTotal = 0;
      this.projects.forEach(({selected}) => {
        if (selected) {
          this.selectedProjectsTotal++
        }
      })
    }
  }
});