Under certain conditions, move the position of the v-text-field text

Question

I'm using Vue.js and Vuetify. Encountered an interesting scene. So I have three options (radio buttons) left middle right and I have a v-text-field with a specific text value and a read-only attribute. Now, when the option changes/selects, I want to change the position of that text within the v-text-field. For example, when option 1 (left), the text should be moved to the left within the v-text-field. When option 2 (middle) is used, the text should move to the middle. So on and so forth. Any suggestions on this. If there is a better way, please guide me.

P粉306523969 · Answer

You can use class or style binding in Vue

data() {
  return {
    activeAlignment: 'center'
  }
}

P粉466290133 · Answer

You can create classes and bind them:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    text: 'some text',
    align: ''
  })
})

.left .v-text-field__slot textarea, .left .v-text-field__slot input {
  text-align: left;
}
.center .v-text-field__slot textarea, .center .v-text-field__slot input {
  text-align: center;
}
.right .v-text-field__slot textarea, .right .v-text-field__slot input {
  text-align: right;
}