0👍
You can bind class names dynamically in vue and as you appear to only have two options you could use a ternary expression to determine which class is bound. As you are already getting your language name from your store you could use that to determine the class. Something like this:
<template>
<div v-bind:class="[language.name === 'en' ? englishClass : russianClass]">
<h1> {{ language && title && title[language.name] }} </h1>
</div>
</template>
<script>
const ABOUT_DIC = {
title: {
en: 'About',
ru: 'Компания'
}
};
export default {
name: 'about',
data () {
return {
title: ABOUT_DIC.title,
englishClass: 'blue',
russianClass: 'green'
}
},
computed: {
language() {
return this.$store.state.language.current; }
}
}
</script>
<style scoped>
.blue {
background-color: blue;
}
.green {
background-color: green;
}
And obviously you can have any styling you want in the blue or green class. The vue.js docs on this are here
Source:stackexchange.com