Vue

by joplomacedo

HTML

<div id="app">
  <div>
    {{__('apple')}}
  </div>
  <div>
    {{__('pear')}}
  </div>
  <div>
    {{__('passionfruit')}}
  </div>
  
  <div>
    {{__('brands', selectedBrand)}}
  </div>

  <select v-model="selectedLang">
    <option value="pt">PT</option>
    <option value="en">EN</option>
  </select>
  
  <select v-model.number="selectedBrand">
    <option value="1">{{__('brands', 1)}}</option>
    <option value="2">{{__('brands', 2)}}</option>
    <option value="3">{{__('brands', 3)}}</option>
  </select>
</div

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  
  data: {
    text: {
    	'pt': {
      	apple: 'Maçã',
      	pear: 'Pêra',
      	passionfruit: 'Maracujá',
        brands: {
        	1: 'Gutchi',
          2: 'O Chefe Hugo',
          3: 'Jorge Armando'
        }
      },
      
      'en': {
      	apple: 'Apple',
      	pear: 'Pear',
      	passionfruit: 'Passion Fruit',
        brands: {
        	1: 'Gucci',
          2: 'Hugo Boss',
          3: 'Giorgio Armani'
        }
      }
    },
    
    selectedLang: 'pt',
    selectedBrand: 1
  },
  
  computed: {
  	__() {
    	return ( id, key ) => {
      	const target = this.text[this.selectedLang][id];
        return key ? target[key] : target;
      }
    }
  }
})