Change direction with selecting Language in Vuejs

Question

I have a Language select-option. If I choose Arabic then it will change the direction.

* {
  direction: rtl!important;
}

While I am using this, then the whole direction changed to right to left. But how can I do that with Methods?

methods: {
  languageSelection() {
     if(this.lang == 'arb') {
        document.getElementsByTagName("*")[0].style.direction = "rtl!important";
        document.getElementsByTagName("html")[0].style.direction = "rtl!important";
        document.getElementsByTagName("body")[0].style.direction = "rtl!important";
      }
   }
}

The above code is not working! If I can add a CSS file then it will be better for me. For example:

languageSelection() {
  if(this.lang == 'arb') {
     // active a css file like: style-rtl.css
  }
}

But how is this possible?

Magiczne · Accepted Answer · 2020-10-18 07:35:14Z

1

Ok. So when you use getElementsByTagName("*")[0] you will probably get a handle to a <html> element. So the same element you're accessing in the next line.

To change all elements direction you would have to iterate over the collection:

const elems = document.getElementsByTagName("*")
for (let elem of elems) {
    elem.style.direction = 'rtl'
}

But this will still include <script>, <style>, <meta> tags, which is not the best solution.

My solution

I would create class in the css

html.is-rtl * {
    direction: rtl;
}

then just toggle the class when you select the language which is read from right to left.

languageSelection() {
  if (this.lang == 'arb') {
     document.querySelector('html').classList.add('is-rtl')
  }
}

answered Oct 18, 2020 at 7:35

Magiczne

1,6112 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dan Knights · Accepted Answer · 2020-10-18 07:33:58Z

0

Could create a stylesheet and append it to the head:

languageSelection() {
  if(this.lang == 'arb') {
     const style = document.createElement('style');
     style.innerHTML = `*{direction:rtl!important}`;
     document.head.appendChild(style);
  }
}

answered Oct 18, 2020 at 7:33

Dan Knights

8,4184 gold badges28 silver badges55 bronze badges

2 Comments

Aspile Inc Over a year ago

Will it create every time of language changing or one time?

Dan Knights Over a year ago

It the function runs every time the select is changed then yes. You'd have to add an ID and check it doesn't exist first

Sina · Accepted Answer · 2020-10-18 07:53:19Z

0

You should manage it inside App.vue. add custom css class based on chosen language to #App element.

<template>
  <div id="app" :class="{'dir-rtl': isRtl}">
    ...
  </div>
</template>
<script>
export default {
  computed: {
    isRtl () {
      return this.lang === 'arb'
    }
  }
}
</script>
<style lang="scss">
.dir-rtl {
  direction: rtl !important;
}
</style>

best place to save and change lang is vuex store.

answered Oct 18, 2020 at 7:53

Sina

1,1451 gold badge11 silver badges26 bronze badges

1 Comment

Aspile Inc Over a year ago

I am storing the language variable in localStorage. I thought about vuex but I think it's better to use localStorage.

Collectives™ on Stack Overflow

Change direction with selecting Language in Vuejs

3 Answers 3

My solution

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

My solution

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related