title: How to access attributes from vuetify elements programmatically?
body: <p>I have some v-text-fields from Vuetify, which have a specific background-color. Looks like this (tried to remove irrelevant information):</p>
  
  <pre><code>&lt;v-text-field id="someId" ref="someRef" background-color="someColor"
  :label="attributeName"
  v-model=someValue
  outline
  clearable
  &gt;&lt;/v-text-field&gt;
  </code></pre>
  
  <p>I want to access the background-color property via js, to change it when some event occurs.
  But I can't figure out how to access this value.
  I can change it manually by using :background-color=outlineColor
  e.g.</p>
  
  <pre><code>data() {
  return {
  outlineColor: "blue"
  }
   },
  </code></pre>
  
  <p>and then assign outlineColor = "someOtherColor" in javascript.</p>
  
  <p>But as I have multiple text fields (created via v-for) and I want to change the colors for all text fields individually, I need to access the specific text field and its background-color manually, instead of changing it for all text fields at once.</p>
  
  <p>I tried it with</p>
  
  <pre><code>this.$refs.someRef
  </code></pre>
  
  <p>but can't find the background-color there.</p>
  
  <p>I also tried finding it at</p>
  
  <pre><code>document.getElementById("someId").style
  </code></pre>
  
  <p>but the only thing I can find there is backgroundColor (which is not background-color), it changes the background color of the text instead of the outline color (the color of the frame around the input field).
  Hope you can imagine it.</p>
  
  <p>Thanks for any hints in advance,
  kalsari</p>