[Vuejs]-How to access attributes from vuetify elements programmatically?

by

0👍

✅

Don’t use manual DOM queries when you don’t need to. This is one of the cases where you really don’t need to.

You change the background color in the same way you assign different models to each of your text fields. You either create a computed property that allows you to easily select a field from the object you get in your v-for, or you use the v-for index to look up a value.

E.g.

<template>
  <div>
    <template v-for="textBoxIndex in 5">
      <v-text-field
        :background-color="this.colors[textBoxIndex]"
        :label="this.labels[textBoxIndex]"
        v-model=this.models[textBoxIndex]
        outline
        clearable
      ></v-text-field>
    </template>
  </div>
</template>

If you loop through actual objects, e.g. with v-for="myTextbox in myTextboxes", you can get the index with v-for="(myTextbox, index) in myTextboxes". You can use a computed property to modify the myTextbox objects you get from looping through myTextboxes, but it will get a little bit weird with the models. Either use manual @input events to modify the right value, use the index to select the right model rather than the computed property, or figure out something different entirely.

Leave a comment