[Vuejs]-Change the color theme of the app in Vuex using the Store

by

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

👤Andrew1325

Leave a comment