[Vuejs]-How can i change element.style in vue.js?

by

0đź‘Ť

Vuetify supports RTL (right-to-left) text layouts (like for Arabic or Hebrew). This is usually set at the application level.

If you created your app using the Vuetify “Quick Start” (i.e. vue create myapp followed by vue add vuetify), then you should have a file at src/plugins/vuetify.js in which you’ll see something like:

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

const options = {
  rtl: true,
  // ... possibly other options ...
}

export const new Vuetify(options)

Or if you’re loading Vue and Vuetify into a browser, wherever you created your Vuetify object, you likely passed it an rtl property like:

const vuetify = new Vuetify({
  rtl: true,
})

new Vue({
  el: '#app',
  vuetify,
})

This should set ALL of the text on your site to be RTL.

Alternatively, the text alignment within a component can be set with one of the text alignment utility classes, BUT these classes have NO effect on v-text-field instances:

<!-- THESE CLASSES HAVE NO EFFECT -->
<v-text-field
  v-model="name"
  class="text-right"
/>
OR
<v-text-field
  v-model="name"
  class="text-end"
/>

Based on this, I think you added the rtl property in your Vuetify configuration somewhere, or possibly changed it later using this.$vuetify.rtl = true (as @Ohgodwhy indicated in a comment)

Leave a comment